Parallax-Effekt ist eine Scroll-Technik im Webdesign, bei der sich verschiedene Ebenen einer Seite mit unterschiedlicher Geschwindigkeit bewegen. Dieser Tiefeneffekt erzeugt eine dreidimensionale Wirkung und macht das Scroll-Erlebnis zu einem visuellen Ereignis.
Ursprung des Parallax-Effekts
Der Parallax-Effekt hat seinen Ursprung in Videospielen der 1980er Jahre: Hintergrundebenen scrollten langsamer als der Vordergrund, um räumliche Tiefe zu simulieren. Im Webdesign wurde das Konzept ab 2011 populär und gehört seitdem zum Repertoire anspruchsvoller Websites.
Arten von Parallax im Web
Scroll-Parallax
Die klassische Variante: Beim Scrollen bewegen sich Elemente mit unterschiedlicher Geschwindigkeit. Hintergründe scrollen langsamer als Vordergrund-Inhalte. Besonders wirkungsvoll in Hero Sections.
Maus-Parallax
Elemente reagieren auf die Mausposition statt auf das Scrollverhalten. Beim Bewegen der Maus verschieben sich Ebenen leicht – ein subtiler, aber eleganter Effekt für Produktpräsentationen.
CSS-Only-Parallax
Mit perspective und translateZ in CSS lässt sich ein Parallax-Effekt ohne JavaScript erzeugen. Das ist die performanteste Variante, da der Browser die GPU nutzen kann.
Einsatzbereiche
- Hero Sections: Hintergrundbild mit Tiefenwirkung hinter der Headline
- Storytelling-Seiten: Bildebenen, die eine Geschichte beim Scrollen erzählen
- Produktpräsentationen: Produkte, die sich beim Scrollen drehen oder bewegen
- Section-Übergänge: Sanfte Übergänge zwischen Sektionen mit Tiefe
Performance-Optimierung
Parallax-Effekte können bei schlechter Implementierung die Performance drastisch verschlechtern. Best Practices:
- CSS-Transforms nutzen:
transform: translate3d()statttop/left– die GPU übernimmt das Rendering will-changeeinsetzen: Informiert den Browser über bevorstehende Transformationen- Scroll-Events drosseln:
requestAnimationFramestatt direkte Scroll-Listener - Bilder optimieren: Große Hintergrundbilder komprimieren und in modernen Formaten liefern
- prefers-reduced-motion: Bei aktivierter Einstellung den Parallax-Effekt deaktivieren
Parallax und Barrierefreiheit
Nutzer mit vestibulären Störungen oder Bewegungsempfindlichkeit können durch Parallax-Effekte Übelkeit oder Schwindel erleben. Die CSS-Media-Query prefers-reduced-motion: reduce muss respektiert werden. In diesem Fall wird der Parallax-Effekt durch ein statisches Layout ersetzt.
Parallax und Core Web Vitals
Richtig implementiert beeinträchtigt Parallax die Core Web Vitals nicht. Falsch implementiert – etwa mit Layout-triggernden CSS-Eigenschaften oder großen, unoptimierte Bildern – kann er den Largest Contentful Paint und die Interaktivität verschlechtern.
Für professionelles Webdesign ist der Parallax-Effekt ein wirkungsvolles Stilmittel, das dosiert und performance-bewusst eingesetzt werden sollte – nicht als Selbstzweck, sondern als Verstärker der Botschaft.