Freelance Developpeur Expert ColdFusion, Internet & web 2.0 - Développeur CF/Railo (CFML), Java, Php, Perl, Python spécialiste. Expertise sur MOA, maitrise d'oeuvre applicative, architecture logiciel, SEO SMO, développement, optimisation et tuning gagné auprès de grands comptes, de petites et moyennes entreprises. Compétences en SQL, JavaScript (JS), JQuery, ExtJS, MVC, CMS, CRM, Framework et outils de management. Web Développeur sur Spip, WordPress, Magento, ezPublish, Drupal, Typo3, Joomla!

JQuery : Bannière animée

> Tech> JScript, JQuery, ExtJs, ...

à partir de deux images Jpeg

development, JQuery, JavaScript, CSS,

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à :)

par JLepage.info le 22 juillet 2012 à 19:31