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.
JuxtaposerJuxtapose 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.Tri et organisation de CSS à l'aide de CSSComb
Comparé à d'autres langages liés au Web, CSS est relativement simple et facile à écrire . Mais en même temps, il est également difficile à organiser, en particulier lorsqu'il s'agit de codes composés de milliers de lignes.Ce serait bien si nous pouvions organiser CSS et faciliter la lecture et la maintenance des codes par les autres développeurs, ce qui est utile si vous travaillez en équipe.Dans ce po
Comment faire pour mettre en surbrillance le texte automatiquement lors du clic de l'utilisateur
Certains éléments de contenu sur les sites Web sont destinés à être copiés par les utilisateurs, tels qu'une adresse URL, une clé API générée automatiquement ou quelques lignes de code (extraits). Mais la copie de ces contenus pourrait être un défi, en particulier pour les utilisateurs qui utilisent un trackpad ou une souris merdique. Alors, ren