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 positionnons deux images (ou plus) l’une au-dessus de l’autre, autant de couches 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élai 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égier les margins/paddings sinon vos images seront calées sur la page et non sur votre conteneur.
Côté 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à :)