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, Ü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