Parallax-Effekte im Web

Parallax im Web ist ein visueller Effekt, bei dem verschiedene Ebenen einer Seite sich mit unterschiedlichen Geschwindigkeiten bewegen – beim Scrollen oder durch Mausverfolgung – und so eine Illusion von Tiefe und Räumlichkeit erzeugen.

Was sind Parallax-Effekte?

Der Begriff „Parallax" stammt aus der Astronomie und Optik: Er beschreibt die scheinbare Verschiebung eines Objekts je nach Beobachtungsposition. Im Web überträgt sich dieses Prinzip auf Scrolling: Elemente im „Vordergrund" bewegen sich schneller als solche im „Hintergrund", ähnlich wie beim Blick aus einem fahrenden Zug.

Parallax-Scrolling wurde als Web-Technik um 2011–2012 populär, unter anderem durch die Nike Better World-Seite (2011) und Ian Coyle. Heute ist es ein etabliertes Gestaltungsmittel, das mit Bedacht eingesetzt werden sollte – sowohl wegen der Performance als auch wegen möglicher Zugänglichkeitsbedenken.

Erklärung

Scroll-Parallax: CSS-Methode

Die einfachste Methode nutzt background-attachment: fixed:

``css .hero { background-image: url('hintergrundbild.jpg'); background-attachment: fixed; /* Hintergrund bleibt beim Scrollen stehen */ background-position: center; background-size: cover; height: 100vh; } ``

Einschränkung: background-attachment: fixed ist auf mobilen Geräten deaktiviert (Safari/iOS ignoriert es) und kann auf manchen GPUs Performance-Probleme verursachen. Für moderne Projekte bevorzugt man JavaScript-Lösungen.

Scroll-Parallax: JavaScript

```javascript window.addEventListener('scroll', () => { const scrollY = window.scrollY;

// Hintergrundbild langsamer bewegen document.querySelector('.hintergrund').style.transform = translateY(${scrollY * 0.3}px);

// Vordergrundelement schneller bewegen document.querySelector('.vordergrund').style.transform = translateY(${scrollY * -0.5}px); }); ```

Optimiert mit requestAnimationFrame:

```javascript let ticking = false;

window.addEventListener('scroll', () => { if (!ticking) { requestAnimationFrame(() => { aktualisiereParallax(); ticking = false; }); ticking = true; } });

function aktualisiereParallax() { const scrollY = window.scrollY; layers.forEach(layer => { const tiefe = parseFloat(layer.dataset.tiefe) || 0.5; layer.style.transform = translateY(${scrollY * tiefe}px); }); } ```

GSAP-Ansatz (empfohlen)

```javascript import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger);

// Hintergrundschicht gsap.to('.bg-layer', { yPercent: 30, // 30% der eigenen Höhe nach unten ease: 'none', scrollTrigger: { trigger: '.container', start: 'top bottom', end: 'bottom top', scrub: true // direkt an Scroll-Position koppeln } });

// Mittelschicht gsap.to('.mid-layer', { yPercent: 15, ease: 'none', scrollTrigger: { trigger: '.container', scrub: true } }); ```

Maus-Parallax

Tiefenwirkung durch Mausbewegung – besonders effektiv in Hero-Bereichen:

```javascript document.addEventListener('mousemove', (e) => { const xRelativ = (e.clientX / window.innerWidth - 0.5) 2; // -1 bis 1 const yRelativ = (e.clientY / window.innerHeight - 0.5) 2; // -1 bis 1

document.querySelectorAll('[data-parallax]').forEach(el => { const tiefe = parseFloat(el.dataset.parallax) || 10;

gsap.to(el, { x: xRelativ tiefe, y: yRelativ tiefe, duration: 0.8, ease: 'power2.out' }); }); }); ```

``html <div class="hero"> <img class="wolke-hinten" data-parallax="5" src="wolke.png"> <img class="berg" data-parallax="15" src="berg.png"> <img class="baum" data-parallax="30" src="baum.png"> </div> ``

CSS Scroll-Driven Parallax (modern, 2023)

```css @keyframes parallax-bewegung { from { transform: translateY(0); } to { transform: translateY(20vh); } }

.hintergrund-bild { animation: parallax-bewegung linear; animation-timeline: scroll(root block); animation-range: 0% 50%; } ```

Beispiele

Mehrstufige Landingpage

```javascript // Daten-Attribut-basierter Ansatz für skalierbare Parallax-Seiten gsap.utils.toArray('[data-speed]').forEach(el => { const speed = parseFloat(el.dataset.speed);

gsap.to(el, { y: () => (1 - speed) ScrollTrigger.maxScroll(window) -0.5, ease: 'none', scrollTrigger: { start: 0, end: 'max', invalidateOnRefresh: true, scrub: 0 } }); }); ```

``html <div data-speed="0.5">Hintergrund (langsamer)</div> <div data-speed="1.0">Normal (kein Parallax)</div> <div data-speed="1.5">Vordergrund (schneller)</div> ``

Perspektiv-Parallax im Hero (CSS only)

```css .hero-wrapper { height: 100vh; overflow-y: auto; overflow-x: hidden; perspective: 300px; }

.hero-hintergrund { transform: translateZ(-150px) scale(1.5); / Durch perspective/translateZ wirkt Hintergrund weiter weg / }

.hero-vordergrund { transform: translateZ(0); } ```

Diese rein CSS-basierte Methode (Keith Clark, 2014) ist performance-schonend und braucht kein JavaScript.

In der Praxis

Wann Parallax einsetzen:

• Hero-Bereiche auf Marketing-Seiten für emotionale Wirkung
• Scrollende Infografiken mit mehreren Daten-Ebenen
• Portfolio- und Agentur-Seiten, die kreative Stärke demonstrieren

Häufige Fehler:

• Parallax auf background-position oder top/left statt transform – löst Reflow aus
• Zu starke Parallax-Werte (>0.5 der Scroll-Distanz) wirken desorientierend
• Fehlende prefers-reduced-motion-Behandlung

``css @media (prefers-reduced-motion: reduce) { [data-parallax], [data-speed] { transform: none !important; } } ``

Mehr unter Performance-Optimierung bei Web-Animationen.

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Warum sieht Parallax auf dem iPhone nicht aus wie geplant? iOS Safari deaktiviert background-attachment: fixed und behandelt Scroll-Events anders. Für iOS-Kompatibilität ist JavaScript-basiertes Parallax oder CSS-transform-Tricks notwendig.

Wie verhindere ich, dass Parallax-Elemente aus dem Container herausragen? Verwenden Sie overflow: hidden am Container und kalkulieren Sie die Überlappung (extra Höhe) des Parallax-Elements ein.

Ist Parallax schlecht für SEO? Nein, wenn Inhalte im DOM vorhanden sind. Parallax ist rein visuell und hat keinen direkten SEO-Einfluss.

Verwandte Einträge

• Scrollytelling – Animation beim Scrollen – Übergeordnetes Konzept für Scroll-basierte Narrative
• GSAP (GreenSock) – Grundlagen – GSAP als Hauptwerkzeug für Parallax-Implementierung
• CSS Transforms (2D & 3D) – Die technische Basis für performantes Parallax
• Performance-Optimierung bei Web-Animationen – Warum transform statt background-position
• Page Transitions im Web – Andere Formen von bewegten Web-Erlebnissen

Weiterführend

• Keith Clark: Pure CSS Parallax Scrolling (2014) – keithclark.co.uk
• CSS Tricks: Parallax Scrolling Techniques (2023) – css-tricks.com
• GSAP: ScrollTrigger Parallax Demo – codepen.io/GreenSock
• MDN: CSS Scroll-driven Animations (2023) – developer.mozilla.org
• Smashing Magazine: A Deep Dive into Parallax Scrolling – smashingmagazine.com