5 scripts de curseur de comparaison d'images gratuits

Les curseurs superposés vous permettent de comparer deux images, généralement un type avant-après, les deux images se superposant. Un curseur pouvant être manipulé, que l'utilisateur peut faire glisser pour afficher moins d'images avant et plus d'images après, et inversement.

C'est le moyen idéal pour certains scénarios tels que l'observation des effets néfastes de l'atmosphère de Mars ou de la façon dont les paysages urbains changent en un demi-siècle..

Pour les concepteurs, c'est également un excellent moyen de réfléchir à l'ampleur des modifications apportées par une technique ou une approche à une image originale. Il existe différentes bibliothèques JS que vous pouvez utiliser à des fins de comparaison. En voici 5.

Vingt-vingt

Vingt-vingt est un outil visuel permettant de noter facilement les différences entre deux images. Cet outil utilisant jQuery et jquery.event.move fonctionne. C'est très facile à utiliser, il suffit d'empiler deux images dans un conteneur, puis d'appeler vingt-vingt (); pour le conteneur.

Ensuite:

 $ ("# conteneur"). vingt-vingt (); 

Twentytwenty est réactif et fonctionne pour tous les appareils. Si vous utilisez le framework Foundation, cela fonctionnera immédiatement..

Juxtaposer

Juxtaposer vous aide à comparer deux supports (photos ou GIF) et vous permet de mettre facilement en évidence le changement entre les images au fil du temps. Ce plugin est facile à utiliser et fonctionne sur tous les appareils. Fournissez simplement deux images, puis appelez le plug-in avec les options disponibles..

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

Essayez une démo ci-dessous:

imgSlider

imgSlider est un simple plugin jQuery pour rendre le curseur de comparaison d’images. L’utilisation est simple et facile: après avoir inclus ses fichiers JS et CSS, encapsulez les images dans div avec le la gauche classe pour le avant image, et droite classe pour le après image, puis activez-la en appelant .curseur ();. 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:

 $ ('. slider'). slider (); 

Cocoen

Cocoen active le contact avec l'utilisation de l'événement jQuery-Touch. Il est facile à appliquer grâce à une structure HTML similaire à la Vingt-vingt brancher. 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'images

CodyHouse a réalisé une démonstration d'un curseur de comparaison d'images avec CSS3, jQuery et certains scripts pour gérer l'événement de glisser et pour ajouter un support mobile. Vous pouvez suivre les explications complètes 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 - JQuery est une dépendance des autres plugins, 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 facile, il suffit d'inclure la bibliothèque CSS et JS de Cato et de suivre sa structure HTML.

Il existe des options à appliquer sur votre curseur, notamment l'ajout d'une info-bulle, la modification de la direction du curseur et même l'ajout d'un effet de filtre tel que sépia et niveaux de gris. Cependant, notez que Cato ne prend actuellement en charge que WebKit..

Avant après - Ceci est léger, totalement réactif et fonctionne sur n'importe quelle disposition et taille. Vous pouvez voir les démonstrations en direct sur Codepen.

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