Menu Icon

Javascript und CSS Image Slider

Javascript und Co.

Im Web lassen sich eindrucksvolle Anwendungen erstellen. Auch ganz nativ ohne Verwendung externer Bibliotheken wie z.B. jQuery. Hier im Beispiel sehen Sie einen Vorher-Nachher Bild Slider. Zu sehen sind 2 Bilder, die sich überlagern und somit kann man durch Verschieben der Trennlinie ganz einfach 2 Bilder miteinander vergleichen. Am Besten kommt der Effekt zur Geltung, wenn 2 gleiche Bilder verwendet werden, von denen eines bearbeitet ist.

Realisiert in reinem JavaScript und CSS, ohne jquery oder ähnlichen Bibliotheken. Hier wurden nur JS und CSS verwendet, eine verlinkte Javascript Datei dient zum Definieren der HTML Elemente und zur Steuerung der Trennlinie, wenn diese mit der Maus bewegt wird.

Beispiel 1: Landschaft


Originalbild: Landschaft bei Tag

Effektbild: Landschaft bei Nacht
Das Bild ist entstanden nach Bildbearbeitung in Photoshop


Facebook Share Button
LinkedIn Share Button
Webwiki Button
Pinterest Share Button
Twitter Share Button
Reddit Share Button
WhatsApp Share Button