Parallax

Der Parallax-Effekt eine Design-Technik, bei der sich verschiedene Elemente einer Seite mit unterschiedlicher Geschwindigkeit bewegen, wenn der Benutzer scrollt. Dies erzeugt eine Tiefenwirkung und ein dynamisches, visuell ansprechendes Erlebnis.

Bei der Benutzung des Cover-Blocks wird das Hintergundbild mit einer anderen Scrollgeschwindigkeit bewegt als der Rest des Inhalts.
Das Bild startet dazu am obersten Rand und bewegt sich dabei in dem „Fenster“ zum unteren Rand.

Die Geschwindigkeit der Bewegung wird von der höhe des Bildes beeinflusst sowie des Scroll-Verhaltens des Besuchers.

Es folgt etwas Beispieltext um den Effekt zu demonstrieren:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Als Cover

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.