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 :
https://codepen.io/lintermediaire/embed/RwrVNKb
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.
