Créer simplement un effet Avant-Après

Les régions académiques

JuxtaposeJS vous permet d’expliquer des changements à travers le temps, de montrer l’impact d’un événement ou toute autre chose avec un avant et un après…

Quelques exemples :

La création est simplissime :

Il est nécessaire que les deux images (aux mêmes dimensions) que vous souhaitez superposer  soient en ligne (disposent d’une URL : hébergées sur un serveur, Dropbox, Google Drive…). Pour l’exemple ci-dessous, j’ai utilisé les images suivantes :

À gauche : http://lycee-saint-exupery.fr/wp-content/uploads/2015/08/juxt11.png

À droite : http://lycee-saint-exupery.fr/wp-content/uploads/2015/08/juxt12.png

JuxtaposeJS — Northwestern University Knight Lab

On peut ajouter des étiquettes (« Avant » & « Après » ci-dessus) en cochant Show Labels, option que je n’ai pas retenue dans l’exemple.

Après avoir éventuellement réglé la position de départ du slider, il ne vous reste qu’à publier :

JuxtaposeJS — Northwestern University Knight Lab2

Vous obtenez un bout de code HTML, une balise iframe qu’il vous suffit de coller dans un article, une page… Et voici le résultat :

Posted in Tutoriels.

Laisser un commentaire