Background "texte" animé

Sniperman113 Messages postés 99 Date d'inscription mercredi 8 octobre 2003 Statut Membre Dernière intervention 21 février 2012 - 28 nov. 2011 à 17:50
aerolyte Messages postés 465 Date d'inscription mardi 17 avril 2007 Statut Membre Dernière intervention 4 mai 2013 - 14 déc. 2011 à 17:31

Bonjour à tous,

J'ai un petit soucis avec une animation que j'aimerais réaliser.

Pour faire simple cette animation correspond à un texte en image de fond (.png admettons) qui grossit au lancement de la page jusqu'à devenir complètement zoomé.

Par exemple, le texte "toto" devient zoomé jusqu'à ne voir plus qu'un bout du o et du t du milieu.

Problème, j'ai essayé d'utiliser les transformations webkit et notamment scale mais impossible de créer ce que je veux. Si quelqu'un à une idée je suis preneur.
Sachant que ça doit être compatible iPhone et iPad.

Merci d'avance pour votre aide.

Cordialement,
Vincent.

A voir également:

Background animé
Background flou ✓ - Forum Javascript / DHTML
Sources background ✓ - Forum VB.NET
Mastermind dessin animé ✓ - Forum C
Anime sixlend ✓ - Forum C# / .NET
Vb.net label transparent background - Forum Visual Basic

3 réponses

Réponse 1 / 3

@karamel Messages postés 1838 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 19 août 2023 148
28 nov. 2011 à 21:07

bounjour

tu peut toujour t'inspirer de ce script qui fait tournoyé et zoomer un texte

Réponse 2 / 3

Sniperman113 Messages postés 99 Date d'inscription mercredi 8 octobre 2003 Statut Membre Dernière intervention 21 février 2012
29 nov. 2011 à 12:56

J'ai trouvé la solution à ce que je recherchais.

Voici le code final si ça peut aider quelqu'un :

<style type="text/css">
#wrapper {
width: 900px;
height: 600px;
overflow: hidden;
position: absolute;
z-index: 1;
}
#inner {
width: 683px;
height: 384px;
-moz-transform-origin: 50% 50%;
-moz-transform: scale(1);
-moz-transition: all 500ms linear 0s;
-webkit-transform-origin: 50% 50%;
-webkit-transform: scale(1);
-webkit-transition: all 2000ms linear 0s;
}
#content {
position: absolute;
z-index: 2;
}
</style>

<script>
window.onload = function() {
var inner = document.getElementById('inner');
inner.style.MozTransform inner.style.WebkitTransform "scale(2.5)";
};
</script>







Ceci est un test

Réponse 3 / 3

aerolyte Messages postés 465 Date d'inscription mardi 17 avril 2007 Statut Membre Dernière intervention 4 mai 2013 1
14 déc. 2011 à 17:31

Une solution plus appropriée (et recommandé par le W3C) est d'utiliser les transitions dans le CSS3.

Cordialement

Discussions similaires

Modifier la taille d'une "background-image:url()" en CSS

gif animé sans perte de définition

Draw Sine Wave animé

Création d'une animation à partir d'images au format BMP

Gif animée en background

Votre réponse

Discussions similaires