Effet de fondu entre éléments

Faire apparaître/disparaître avec un fondu entre deux éléments
dimanche 25 février 2007
par KreaComm’
popularité : 5%

Voici un petit bout de code permettant un fondu simultané (apparait/disparait) entre deux éléments html (div, img, a etc.).

Testé et fonctionnel sous ie6+, FF2 et Opera 9.

Démo sur la page d’accueil de Challenge&Co UK

Code JS :

  1. lastShow=1;
  2. function switchTxt(nbElementEvent)
  3. {
  4.         Element.addClassName($('txtSuite'+nbElementEvent),'positionElementDesc');
  5.         new Effect.Fade($('txtSuite'+lastShow),{
  6.         duration: 0.3,
  7.         from:1.0,
  8.         to:0.0,
  9.         afterFinish:function()
  10.         {
  11.                 Element.removeClassName($('txtSuite'+nbElementEvent),'positionElementDesc');
  12.         }
  13.         });
  14.         new Effect.Appear($('txtSuite'+nbElementEvent),{
  15.         duration: 0.3,
  16.         from:0.0,
  17.         to:1.0
  18.         });
  19.         lastShow=nbElementEvent;
  20. }
Télécharger

Dans mon cas, j’avais x éléments (div) contenant du contenu html, un seul est affiché à la fois ; le premier (index 1) étant affiché au chargement de la page. Le but étant de pouvoir switcher entre les éléments avec un effet de fondu à la manière d’un diaporama d’images...

On attribu la classe css positionElementDesc de manière à pouvoir superposer le nouvel élément sur l’ancien déjà affiché.

Code CSS de la classe positionElementDesc :

  1. .positionElementDesc {
  2. position:absolute;
  3. left:0;
  4. top:0;
  5. }
Télécharger

La variable lastShow indique le dernier élément ayant été affiché (on n’affiche qu’un seul élément à la fois).

On appel la fonction switchTxt(nbElementEvent) , nbElementEvent représente l’index de l’élément à afficher.

Code html :

  1. <p><a javascript:; onclick="switchTxt(1);">Titre 1</a> | <a javascript:; onclick="switchTxt(1);">Titre 2</a> | <a javascript:; onclick="switchTxt(1);">Titre 3</a> | <a javascript:; onclick="switchTxt(1);">Titre 4</a></p>
  2. <div style="position:relative;">
  3. <p id="txtSuite1">du texte, des images...</p>
  4. <p id="txtSuite2">du texte, des images...</p>
  5. <p id="txtSuite3">du texte, des images...</p>
  6. <p id="txtSuite4">du texte, des images...</p>
  7. </div>
Télécharger

Le code n’est pas forcément optimisé, mais peut servir de base pour bien d’autres utilisations.


Commentaires

Navigation

Articles de la rubrique