de.hideout-lastation.com
Paradies Für Designer Und Entwickler


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.

Analysetools für Google+ Marketer - Best Of

Analysetools für Google+ Marketer - Best Of

Google+ wurde früher als Internet-Äquivalent einer Geisterstadt gesehen, mit zu wenigen Nutzern, um als Marketingplattform nützlich zu sein. Aber im Laufe des Jahres 2013 begann sich diese Wahrnehmung langsam zu ändern. Erstens berichtete der Global Web Index, dass Google+ Twitter überholt hat, um zum zweitaktivsten sozialen Netzwerk zu werden. Dan

(Tech- und Design-Tipps)

Anhalten und Schleifen von CSS-Animationen mit WAIT!  Animieren

Anhalten und Schleifen von CSS-Animationen mit WAIT! Animieren

Es gibt eine Menge, die Sie mit reiner CSS-Animation machen können, aber das Anhalten und Schleifen einer Animation ist mit der aktuellen W3-Spezifikation nicht möglich .Aber mit einem kostenlosen Tool wie WAIT! Animieren Sie können Schleifenanimationen von Grund auf mit benutzerdefinierten Verzögerungen zwischen den einzelnen Schleifen erstellen . Di

(Tech- und Design-Tipps)