JQuery : Bannière animée

  • Jul 22, 2012
  • development, JQuery, JavaScript, CSS
  • JLepage

Situation
Faire une petite bannière animée c’est souvent fastidieux si vous n’êtes pas un infographiste et si vous n’avez aucune connaissance de Photoshop ou d’autre logiciel graphique.
Heureusement, avec un peu de CSS, de JQuery et de talent, cela peut être bien plus simple avec quelques lignes de code.

Théorie
En CSS, nous positions deux images (ou plus) l’une au dessus de l’autre, autant de couche superposées que d’image. On va jouer avec le z-Index pour définir l’ordre des images.
En JQuery nous allons utiliser principalement les fonctions fadeIn() / fadeOut() et la fonction delay(). Les premières qui vont jouer sur l’affichage de l’image, la dernière sur un délais d’attente.

Pratique
Coté CSS, on superpose les images avec la position absolute :

#banImg1{
	display : block ;
	z-index : 90 ;
	position : absolute ;
}

#banImg2{
	display : block ;
	z-index : 10 ;
	position : absolute ;
}


Comme on travail en absolute, si vous êtes dans un conteneur, évitez les top, bottom, left, right, ... pour plutôt privilégié les margins/paddings sinon vos images seront calées sur la page et non sur votre conteneur.
Coté JQuery, on écrit deux fonctions :

function myFadeIn() {
	$(’#banImg1’).delay(2500).fadeIn(’slow’, function() {
		myFadeOut();
	});
}

function myFadeOut() { 
	$(’#banImg1’).delay(2500).fadeOut(’slow’, function() {
		myFadeIn();
	});
}


Maintenant, vous allez me dire "mais pourquoi deux fonctions ?". Et bien c’est simple, car nous pouvons les chainer avec les closures de JQuery et faire une boucle infinie où les fonctions s’appellent entre elles. Il ne reste donc plus qu’à lancer la première fonction...

$(document).ready(function() {
	mFadeOut() ;
});


Et voilà :)