5 kostenlose Bildvergleichsslider-Skripte

Mit überlagerten Schiebereglern können Sie zwei Bilder vergleichen, normalerweise eine Vorher-Nachher-Art, wobei die beiden Bilder einander überlagert werden. Ein Schieberegler, der manipuliert werden kann, kann vom Benutzer gezogen werden, um weniger von dem Vorher-Bild und mehr von dem Nachbild und umgekehrt zu zeigen.

Es ist der perfekte Weg für bestimmte Szenarien, wie zum Beispiel die rauen Auswirkungen der Marsatmosphäre oder wie sich Stadtlandschaften über ein halbes Jahrhundert verändern.

Für Designer ist es auch eine gute Möglichkeit, über die Menge an Veränderungen nachzudenken, die eine Technik oder ein Ansatz auf ein Originalbild hat. Es gibt verschiedene JS-Bibliotheken, die Sie für Vergleichszwecke verwenden können. Hier sind 5 von ihnen.

Zwanzigundzwanzig

Zwanzigundzwanzig ist ein visuelles Werkzeug, um die Unterschiede zwischen zwei Bildern zu erkennen. Dieses Tool verwendet die Funktionen jQuery und jquery.event.move, um zu funktionieren. Es ist sehr einfach zu bedienen, stapeln Sie einfach zwei Bilder in einen Container und rufen Sie twentytwenty(); für den Behälter.

Dann:

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

Twenty twenty ist reaktionsschnell und funktioniert für alle Geräte. Wenn Sie das Foundation-Framework verwenden, funktioniert dies sofort.

Gegenüberstellen

Mit Juxtapose können Sie zwei Medienelemente (Fotos oder GIF) miteinander vergleichen und die Änderung zwischen den Bildern im Zeitverlauf hervorheben. Dieses Plugin ist einfach zu bedienen und funktioniert auf allen Geräten. Stellen Sie einfach zwei Bilder bereit und rufen Sie dann das Plugin mit den verfügbaren Optionen auf.

In den Optionen können Sie die Startposition des Sliders festlegen, sie vertikal oder horizontal einstellen, Label und Credits, Animationen und mehr hinzufügen.

Versuchen Sie eine Demo unten:

imgSlider

imgSlider ist ein einfaches jQuery-Plugin, um Bildvergleichs-Schieberegler zu erstellen . Die Verwendung ist einfach und einfach: Nachdem Sie JS und CSS eingeschlossen haben, wickeln Sie die Bilder in div mit der left Klasse für das Vorher- Bild und der right Klasse für das Nach- Bild ein und aktivieren Sie sie dann mit .slider(); . Zu den Optionen des Plugins gehören die Einstellung der Anfangsposition des Schiebereglers und das Hinzufügen / Anzeigen von Anweisungen auf dem Schieberegler.

Rufen Sie das Plugin auf:

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

Cocoen

Cocoen ermöglicht die Berührung mit dem jQuery-Touch Event. Es ist einfach anzuwenden aufgrund einer HTML-Struktur ähnlich dem Twentytwenty- Plugin. Im Skriptstapel müssen Sie neben jQuery die jQuery Touch Event-Bibliothek neben diesem Plugin einfügen.

 $ (Dokument) .ready (Funktion () {$ ('. cocoen'). cocoen ();}); 

Versuchen Sie eine Demo unten:

Bildvergleich Slider

CodyHouse machte eine Demo eines Bildvergleichs-Sliders mit CSS3, jQuery und einigen Skripten, um das Ziehereignis zu behandeln und mobilen Support hinzuzufügen. Sie können die vollständigen Erklärungen und Anweisungen zur Verwendung dieses Plugins hier und sehen Sie sich die Demo hier.

Versuchen Sie eine Demo unten:

Hier sind 3 weitere:

Cato - Andere Plugins benötigen jQuery als Abhängigkeit, aber Cato benötigt keine Abhängigkeit, um es zu einer leichteren Bibliothek für Bildvergleichsschieberegler zu machen. Die Verwendung ist einfach, schließen Sie Catos CSS- und JS-Bibliothek ein und folgen Sie dessen HTML-Struktur.

Es gibt Optionen, die Sie auf Ihren Schieberegler anwenden können, einschließlich Hinzufügen von QuickInfos, Ändern der Schiebereglerrichtung und sogar Hinzufügen von Filtereffekten wie Sepia und Graustufen. Sie sollten jedoch beachten, dass Cato derzeit nur WebKit unterstützt.

Before After - Das ist leicht, reaktionsschnell und funktioniert auf jedem Layout und jeder Größe. Sie können die Live-Demos auf Codepen sehen.

HTML5 Video Comparison Slider - Wenn ein anderer Entwickler versucht, einen Vergleichsschieberegler für Bilder zu erstellen, wendet Dudley Storey den Schieberegler auf Video an. Um Arbeit zu machen, nutzt er die jQuery und nur ein paar Zeilen Code. Sehen Sie sich die Demo auf Codepen an, um die Aktion zu sehen.