Comment créer une simple transition entre deux images ?

Comment créer une simple transition entre deux images ?

3 avril 2019 0 Par Miss Dev

Le 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.

Créer un fondu enchaîné au passage de la souris

Le but est de créer une transition entre deux images qui est déclenché par l’arrivée de la souris.

crossfading star trek déclenché par l'arrivé de 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.

Vous aller aussi aimer:

  1. Comment créer une bannière animée à la souris ?
  2. Comment créer un effet parallax scrolling en utilisant HTML et CSS ?
  3. Réaliser un bouton se déplaçant avec la souris.
  4. L’effet parallaxe – des erreurs à éviter à travers 6 sites web.
CatégorieWeb Design
Mots-clésAnimation Tutoriel

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.