Bilder beim Scrollen überblenden

Crossfade.js
Kommentare

Websites lassen sich ansprechender gestalten, indem man etwa Bildern Effekte hinzufügt. Eine Möglichkeit dafür ist das jQuery-Plug-in crossfade.js, mit dem Bilder überblendet werden, während auf der

Websites lassen sich ansprechender gestalten, indem man etwa Bildern Effekte hinzufügt. Eine Möglichkeit dafür ist das jQuery-Plug-in crossfade.js, mit dem Bilder überblendet werden, während auf der Seite heruntergescrollt wird. Im Prinzip lädt crossfade.js die Start-und Endbilder vor, generiert ein -Element und fügt es dem Bildelement hinzu, wobei die Bildelemente übereinander lagern. Anschließend werden die Bilder mit window.requestAnimationFrame erneut dargestellt.

Crossfade.js sorgt für einen verwaschenen Effekt

Bildern mit crossfade.js einen Überblend-Effekt zu verleihen, ist nicht schwierig. Benötigt wird dafür der Quellcode, der bei GitHub heruntergeladen werden oder mit Bower installiert und initialisiert werden kann.

Anschließend können noch verschiedene Option für die Darstellung definiert werden, etwa zum Start- und End-Bild, dem Übergang zwischen beiden Elementen und der Position der Hintergrund-Bilder. Welche Möglichkeiten es dabei gibt und was bei der Arbeit mit crossfade.js noch beachtet werden muss, erklärt Mike Fowler ausführlicher in seinem Tutorial.

Aufmacherbild: Overcoast summer backgrounds with faded colors von Shutterstock / Urheberrecht: Ase

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -