Entwicklung & Design

TwentyTwenty: Einfacher Vorher-/Nachher-Vergleich mit jQuery

Mit dem jQuery-Plugin TwentyTwenty kannst du auf simple Weise die Unterschiede zwischen zwei Bildern darstellen. Wir stellen dir das nützliche jQuery-Plugin kurz vor.

TwentyTwenty Screenshot

TwentyTwenty-Vorher-/Nachher-Beispiel

Bei der Darstellung von Bildunterschieden ist das Platzieren der beiden Bilder nebeneinander ein typischer Lösungsansatz. Leider entgeht dabei oft, was genau sich am Bild verändert. Wenn du Unterschiede zwischen Fotos darstellen musst, ist TwentyTwenty ein Plugin, das dich interessieren könnte. Das jQuery-Plugin legt zwei Fotos übereinander und lässt dich die Änderungen mit Hilfe eines Sliders live erleben. Das Skript benutzt die jquery.event.move-Bibliothek, um Maus- und Touch-Eingaben zu verfolgen und funktioniert somit sowohl auf Desktop- als auch auf Touchscreen-Geräten.

TwentyTwenty für Vorher-/Nachher-Bilder

TwentyTwenty ist ein tolles Plugin, um Vorher-/Nachher-Vergleiche mit Bildern anzustellen. Das Plugin funktioniert mit Touch-Geräten und ist responsive, sodass es sich in jede Geräte-Größe perfekt einfügen lässt. TwentyTwenty basiert auf Sass und lässt sich mit einer Reihe von Sass-Variablen in der Erscheinung anpassen. Brauchst du also für ein zukünftiges Projekt einen bequemen Vorher/Nachher-Vergleich, könnte TwentyTwenty genau die Richtige Lösung für dich parathalten. Auf der offiziellen Seite zum TwentyTwenty-Plugin erfährst du mehr.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

3 Kommentare
Internetagentur agency1®

Super Tool um z.B. Fotoretuschen optimal zu präsentieren. Vielen Dank! :)

Antworten
fimbim

So etwas gibt es schon ganz lange. Nennt sich „beforeafter“. Hab ich mal verwendet um mein Retina Display testen zu können: http://www.retina-test.de/retina-fotos.html

Antworten
mebulon
mebulon

Mal ein generelles Feedback.
Ich bin so ziemlich täglich auf eurer Seite.
Mich interessiert besonders alles was mit Html5 und Co zu tun hat.
Ganz oft stellt ihr bestimmte Scripte vor. Wie z.b. Parallax Scrolling vor kurzem oder jetzt dieses.

Normalerweise will ich eigentlich immer den effekt sehen bevor ich anfange euren Artikel zu lesen. Um zu prüfen ob mich das interessiert. Und den Effekt zu sehen ist intersannter und geht schneller als mir durchzulesen was er macht.

Leider merke ich, dass ich jedesmal eine gewisse lange Zeit brauche, bis ich zu der jeweiligen Demopage komme. Ich muss immer den Fließtext durchscannen und prüfen welcher Link jetzt eigentlich zu der Wirklichen Demo Seite geht.

Könntet ihr das nicht irgendwie deutlicher auszeichnen? Und bitte am Anfang der Seite…
Oder warum nicht gleich eine Demo in den Artikel.
Hätte hier z.b. doch super easy funktioniert.

Würd mich freuen. Ich stöbere nämlich gerne durch eure Artikel. Und keine Sorge ich lese auch tatsächlich welche ;) Aber halt lange nicht alle.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.