Avant – Après


Blog #Outils web

Vous avez peut-être déjà vu cet effet sur des sites où il est possible à l’aide de sa souris, modifier une image pour en faire apparaître une autre et cela dans le but de créer un « avant-après » et monter l’évolution d’un lieu photographié ou d’une création quelconque. Voilà comment mettre en place un tel système.

Comme il s’agit d’une action côté utilisateur, nous nous tournerons vers javascript. Il doit sans doute y avoir de nombreuses librairies javascript qui réalisent cet effet mais j’avoue ne pas en avoir approfondi la recherche. Je suis tombé en ce qui me concerne sur Beerslider. Très simple d’utilisation, l’outil vous demande, en plus de l’installer bien sûr, d’encadrer deux images dans une balise html « div » (ou la plus appropriée) . La première image se présentera à gauche, vue comme la plus ancienne ou l’image d’origine.
L’outil javascript s’occupe du reste :

Trop simple ?

Personnellement, il ne m’en fallait pas plus pour espérer le résultat obtenu.
Mais la librairie n’a cependant que 2 options ; dont une très intéressante ; décider d’à partir de quand l’image du dessous apparaît. Dans mon exemple, le chiffre 50 signifie que le curseur se situe à 50% des deux images juxtaposées, soit au centre.

Pour conclure

Voilà une librairie javascript (et compatible avec jQuery) à garder sous la main pour obtenir ce type d’animation. On pourrait cela dit tenter de trouver un autre outil du même type qui pourrait par exemple customiser le cursor ou les boutons d’actions de base (ces derniers sont visibles si vous renseignez du texte dans les attributs « beer-label » dans votre html. Dernier conseil : renseignez également le css de beerslider, sans quoi l’outil ne fonctionnera pas.

Date de l'article : Le 22 avril 2020 à 08:00
Outils : Html, Css, Jquery

Merlin

Diplômé d'un baccalauréat en Communication et Journalisme, j'ai maintenant terminé ma formation de Web-Designer/concepteur d'interface pour entrer dans le monde du web qui me passionne depuis toujours. Bienvenue sur mon blog et bonne visite !