
Comment créer une simple transition entre deux images ?
3 avril 2019 0 Par Miss DevLe fondu enchaîné (ou crossfading) entre deux images permet d’ajouter un effet suivant une transparence donnée. Il existe plusieurs façons de faire. Soit au passage de la souris, soit au clic de la souris, soit grâce à un timer etc… Nous nous concentrerons sur les deux premières façons c’est-à-dire en utilisant la souris.
Les besoins
Il vous faudra deux images. Il n’est pas nécessaire qu’elles soient de la même taille car cela sera réglé en CSS. Néanmoins, il faut qu’elle soit de taille similaire pour éviter les disproportions. Par exemple, choisissez bien deux images au format paysage OU deux images au format portrait.
Puis, un fichier .html et un .css pour ranger votre code.
Le code
HTML
Toujours commencer par HTML. Je crée un div qui contiendra les deux images. Dans les balises images, je mets en premier celle qui se trouvera derrière et qui apparaîtra donc au passage de la souris. Elle sera cachée par la première image au-dessus qui aura l’id top.
index.html
<div id="cross-fading"> <img src="images/star-trek-discovery.jpg" /> <img id="top" src="images/star-trek-anciens.jpg" /> </div>
CSS
Ce sera une simple mise en page. Je commence par régler la taille des images pour qu’elles soient la même pour les deux. Pour que les images se retrouvent l’une en dessous de l’autre, il faut rajouter position: absolute;. L’effet de transition est créé grâce à opacity qui est intégré en fonction des navigateurs qui ne réagissent pas tous de la même façon (comme vue ici).
J’arrange ensuite le div général pour centrer les images.
style.css
#cross-fading img { width: 500px; position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } #cross-fading { position:relative; height:281px; width:450px; margin:0 auto; }
Comme vous pouvez le constater, à ce stade, il ne se passe rien. En effet, il est nécessaire d’ajouter une ligne de code supplémentaire. Vous avez trouvé ?
Indice : il y a un id que nous n’avons pas utilisé…
style.css
#cross-fading img#top:hover { opacity:0; }
C’était bien sûr l’id top. Nous allons rendre la première image transparente pour pouvoir afficher la seconde.
Résultat
See the Pen Crossfading Star Trek - Mouse Hover by Miss Dev (@MissDev) on CodePen.
Créer un fondu enchaîné au clic de la souris
Cette fois-ci, un simple passage de la souris ne suffit plus. Il faut cliquer sur la première image pour pouvoir déclencher l’animation. Pour cela, nous allons utiliser du JQuery.
Les besoins sont presque les mêmes. Il faut rajouter aux deux images et aux fichiers html et css, un fichier js.
Voici ce qu’il y a à changer au niveau du code :
HTML
Le code HTML précédent est toujours valable ici. Il n’y a rien à y changer. À part rajouter le lien vers le script JQuery tout en bas, entre la balise body et html.
index.html
<div id="cross-fading"> <img src="images/star-trek-discovery.jpg" /> <img id="top" src="images/star-trek-anciens.jpg" /> </div>
CSS
Pour le CSS, toute la première partie est la même. J’ai bien sûr enlevé le :hover et ajouté à la place transparent qui sera modifié par le JavaSript.
#cross-fading { position:relative; height:281px; width:450px; margin:0 auto; } #cross-fading img { width: 500px; position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } /* ++++++++++ */ #cross-fading img.transparent { opacity:0; } #cross-fading { cursor:pointer; }
JavaScript
On dit à JS qu’au clic sur l’id cross-fading, l’image du dessus deviendra transparente. Cela laissera place à l’image du dessous.
script.js
$(document).ready(function() { $("#cross-fading").click(function() { $("#cross-fading img#top").toggleClass("transparent"); }); });
N.B : Il est également possible de se servir que d’une seule image pour la faire disparaître et réapparaitre. Avec pourquoi pas du texte en dessous ou pour afficher le background.
Résultat
See the Pen Crossfading Star Trek - Click by Miss Dev (@MissDev) on CodePen.
Conclusion
Nous avons vu comment créer une transition entre deux images grâce à la souris.
Au passage, cela nécessite uniquement du HTML et CSS alors qu’avec le clic, il faut aussi du JavaScript (et JQuery).
Pour poursuivre sur ce type d’animation, sachez qu’il existe également plein d’effet différent pour faire apparaitre et disparaitre des images.
D’après bradshawenterprises.