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.

3 réponses

@karamel Messages postés 1815 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 25 novembre 2022 145
28 nov. 2011 à 21:07
bounjour

tu peut toujour t'inspirer de ce script qui fait tournoyé et zoomer un texte
0
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

0
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
0