La comparaison d'images avant/après

Créer une comparaison interactive d'une image avant/après

gifcover.gif

Comparez une image avant et après des modifications. Jouez avec un curseur pour afficher ces modifications sur une seule et même image. Grâce aux marqueurs, afficher des informations qui correspondent à des endroit précis de votre image.

Les étapes 

      1. Téléchargez d'abord le module HTML en .zip juste ici : comparaison d'image
      2. Intégrez ensuite un composant HTML.
      3. Insérez le module dans votre composant HTML.

         

        Composant.gif

         

      4. Ajouter vos images : une d'origine et l'autre avec les modifications (assurez vous qu'elles fassent la même taille).
      5. Personnalisez la couleur de votre curseur.
      6. Ajouter des marqueurs où vous le souhaitez.

        marqueurs.gif

         

      7. Créez vos animations en fonction de ces marqueurs.

        Capture_d_e_cran_2018-05-07_a__16.32.17.png

      8. Vous avez maintenant un outil de comparaison d'image avant/après. 

 

 

 

Voici un exemple simple d'animation pour vous inspirer :

 

  • Faites apparaître des informations avec le curseur :

gifinfo.gif

 

Bien sûr les possibilités sont nombreuses. Couplez le curseur avec des sons, d'autres composants, des pop-up ... Laissez libre court à votre imagination.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0

Créez votre contenu interactif dès aujourd'hui

Simple d'utilisation ∗ Gratuit ∗ Pas d'installation

COMMENCEZ MAINTENANT !