5 Scripts de glisseurs de comparaison d'images gratuites

Les curseurs superposés vous permettent de faire des comparaisons entre deux images, généralement de type avant-après, avec les deux images superposées les unes aux autres. Un curseur qui peut être manipulé peut être déplacé par l'utilisateur pour afficher moins de l'image avant et plus de l'image après, et vice versa.

C'est le moyen idéal pour certains scénarios tels que regarder les effets durs de l'atmosphère de Mars ou comment les paysages de la ville changent sur un demi-siècle.

Pour les concepteurs, c'est aussi un excellent moyen de réfléchir à la quantité de changement qu'une technique ou une approche a sur une image originale. Il existe différentes bibliothèques JS que vous pouvez utiliser à des fins de comparaison. Voici 5 d'entre eux.

Twentytwenty

Twentytwenty est un outil visuel pour faciliter la prise en compte des différences entre deux images. Cet outil utilise jQuery et jquery.event.move pour fonctionner. C'est très facile à utiliser, empilez simplement deux images dans un conteneur, puis appelez twentytwenty(); pour le conteneur.

Alors:

 $ ("# container"). twentytwenty (); 

Twentytwenty est réactif et fonctionne pour tous les appareils, et si vous utilisez le cadre de la Fondation, cela fonctionnera hors de la boîte.

Juxtaposer

Juxtapose vous aide à comparer deux médias (photos ou GIF) et vous permet de mettre en évidence le changement entre les images au fil du temps. Ce plugin est facile à utiliser et fonctionne sur tous les appareils. Il suffit de fournir deux images puis appelez le plugin avec les options disponibles.

Sur les options, vous pouvez définir la position de départ du curseur, le définir verticalement ou horizontalement, ajouter une étiquette et un crédit, une animation et plus encore.

Essayez une démo ci-dessous:

imgSlider

imgSlider est un simple plugin jQuery pour faire un curseur de comparaison d'image. L'utilisation est simple et facile: après avoir inclus son JS et CSS, enveloppez les images dans div avec la classe de left pour l'image avant, et la right classe pour l'image après, puis l'activer en appelant .slider(); . Les options du plugin comprennent la définition de la position initiale du curseur et l'ajout / l'affichage d'instructions sur le curseur.

Appelez le plugin:

 $ ("curseur"). curseur (); 

Cocoen

Cocoen permet le contact avec l'utilisation de l'événement jQuery-Touch. Il est facile à appliquer en raison d'une structure HTML similaire au plugin Twentytwenty . Sur la pile de scripts, en plus de jQuery, vous devez inclure la bibliothèque jQuery Touch Event, à côté de ce plugin.

 $ (document) .ready (function () {$ ('.cocoen'). cocoen ();}); 

Essayez une démo ci-dessous:

Curseur de comparaison d'image

CodyHouse a fait une démo d'un curseur de comparaison d'images avec CSS3, jQuery et quelques scripts pour gérer l'événement de glisser et ajouter un support mobile. Vous pouvez suivre l'explication complète et les instructions d'utilisation de ce plugin ici et voir la démo ici.

Essayez une démo ci-dessous:

Voici 3 autres:

Cato - Les autres plugins ont besoin de jQuery en tant que dépendances, mais Cato ne nécessite aucune dépendance pour fonctionner, ce qui en fait une bibliothèque plus légère pour les curseurs de comparaison d'images. L'utilisation est simple, il suffit d'inclure la bibliothèque CSS et JS de Cato et de suivre sa structure HTML.

Il y a des options disponibles à appliquer sur votre curseur, y compris l'ajout d'info-bulle, le changement de direction du curseur, et même l'ajout d'un effet de filtre tel que sépia et niveaux de gris. Cependant, vous devez noter que Cato ne prend actuellement en charge que WebKit.

Avant Après - Léger, totalement réactif, il fonctionne sur n'importe quelle mise en page et taille. Vous pouvez voir les démos en direct sur Codepen.

Curseur de comparaison de vidéo HTML5 - Lorsqu'un autre développeur essaie de faire un curseur de comparaison pour des images, Dudley Storey applique le curseur à la vidéo. Pour faire du travail, il utilise le jQuery et quelques lignes de code. Voir la démo sur Codepen pour voir l'action.