Codrops nous propose un tutoriel expliquant comment créer une bannière animée uniquement avec l’aide de jQuery (ce qui sous entend sans flash ou gif animés).
L’exemple de Codrops sera beaucoup plus parlant qu’une longue explication : http://tympanus.net/Tutorials/CustomAnimationBanner/
Pour obtenir ce résultat, il vous faudra créer un DIV principal contenant les « DIV slider », c’est à dire qui contiennent les différente images à afficher. A ce niveau, il faudra un peu de HTML et CSS pour obtenir le résultat voulu. Ensuite, l’animation s’appuie sur les plugins jQuery Easing et jQuery 2D transform. Avec ce couple, il est possible de diriger les images comme on le souhaite et obtenir des effets visuels très sympathiques. Enfin, il vous faudra créer un troisième fichier, javascript cette fois ci, et architecturer vos animations : on indique au premier slide, je veux que l’image soit pourvue de telle animation, d’une durée de n secondes, avec un enchainement « untel »… pour le second slide idem etc… Et jQuery s’occupe du reste !
Le tutoriel est très bien fait et le résultat tout simplement parfait.
Site Internet : Bannière animée
Licence :
