Parallax scrolling in pure CSS: perspective en scroll-driven
Bouw parallax met CSS perspective en translateZ, of met scroll-driven animations, zie de dieptewiskunde live en ga goed om met telefoons en reduced motion.
Parallax in pure CSS kent twee betrouwbare methoden. De perspective-methode maakt een scrollcontainer met perspective, duwt achtergrondlagen naar achteren met translateZ en schaalt ze daarna op met (perspective min z) gedeeld door perspective. De nieuwere methode koppelt een translate-animatie aan animation-timeline: view(). Beide moeten uitgeschakeld worden onder prefers-reduced-motion.
Drie manieren om een parallax-effect te krijgen
Methode
Hoe het beweegt
Let op
perspective + translateZ
Diepere lagen scrollen langzamer binnen een 3D-scrollcontainer
Heeft een eigen scrollcontainer nodig, niet de pagina
animation-timeline: view()
Een translate in keyframes volgt het element door de viewport
Chrome en Edge 115+, Safari 26+, Firefox 161+
background-attachment: fixed
De achtergrond blijft stilstaan terwijl de inhoud eroverheen beweegt
Gedeeltelijke ondersteuning in iOS Safari; hapert op veel telefoons
Fallback in JavaScript
De scrollpositie stelt elk frame een transform in
Gebruik requestAnimationFrame en een passive listener
De meeste parallax-tutorials stoppen bij background-attachment: fixed, wat iPhones maar gedeeltelijk ondersteunen. Deze gids toont de twee methoden die lagen echt animeren, legt de schaalberekening uit zodat uw lagen niet krimpen, en geeft een klein script als fallback plus de afhandeling van reduced motion, zodat het effect niemand misselijk maakt.
Verschuif de diepteschuif in de playground om de achtergrondlaag verder naar achteren te duwen.
Scroll in de preview en vergelijk hoe snel de achterste laag beweegt ten opzichte van de tekst vooraan.
Lees de berekende schaal en snelheid af; die gebruikt de CSS hieronder.
Kopieer de methode die past: perspective voor een afgebakende hero, view() voor secties op een normale pagina.
Een laag op translateZ(z) onder perspective p beweegt met p gedeeld door (p min z) van de scrollsnelheid.
Zet overflow-x: hidden op de parallax-container, want geschaalde lagen zijn breder dan hun box.
Declareer animation-timeline na de animation-shorthand, want de shorthand zet hem terug op auto.
Zet beweging binnen @media (prefers-reduced-motion: no-preference), zodat het effect standaard alleen draait voor wie er geen bezwaar tegen heeft.
Veelgestelde vragen
Waarom ziet mijn translateZ-laag er kleiner uit?
Een element met een negatieve translateZ van de kijker af duwen maakt het kleiner, precies zoals een voorwerp in de verte. Voeg scale((p - z) / p) toe om de grootte te herstellen. Met perspective: 1px en translateZ(-2px) is dat scale(3).
Werkt background-attachment: fixed op mobiel?
Niet betrouwbaar. caniuse vermeldt slechts gedeeltelijke ondersteuning in iOS Safari en merkt op dat de meeste mobiele apparaten een vaste achtergrond traag bijwerken na het scrollen. Zie het als een extraatje voor desktop en gebruik een van de transform-methoden als het effect ertoe doet.
Is parallax slecht voor toegankelijkheid?
Grote beweging die aan scrollen gekoppeld is, kan duizeligheid of misselijkheid veroorzaken bij mensen met evenwichtsstoornissen. Respecteer de instelling voor minder beweging van het besturingssysteem met de mediaquery prefers-reduced-motion en toon de lagen stilstaand als die aanstaat.
Per oktober 2026 vermeldt caniuse animation-timeline in Chrome en Edge vanaf 115, Safari vanaf 26 en Firefox vanaf 161. Oudere browsers slaan de animatie gewoon over, dus de pagina blijft zonder het effect goed leesbaar.
Hoe de perspective-methode werkt
De container wordt de scroller en krijgt een perspective-waarde. Zijn kinderen behouden hun 3D-positie met transform-style: preserve-3d. Als de container scrolt, legt een laag die verder naar achteren in z staat minder afstand op het scherm af dan een laag op z gelijk aan nul, waardoor hij lijkt achter te blijven.
Omdat perspective op een element ook een stacking context en een containing block voor vaste kinderen maakt, houdt u de parallax-wrapper het best op zichzelf staand. Headers die aan het venster vast moeten blijven, horen erbuiten.
Telefoons en oudere browsers
Het eigen artikel van Chrome over performante parallax merkt op dat momentum scrolling op iOS vroeger de 3D-context plat maakte, waardoor de perspective-truc op iPhones niet werkte. Test op een echt apparaat en houd de inhoud leesbaar als lagen niet bewegen.
De scroll-driven methode heeft dat probleem niet, omdat die op de normale scroller van de pagina draait. Waar hij niet ondersteund wordt, draaien de keyframes nooit en blijft de laag op zijn rustpositie, wat een nette fallback is.
Methode 1: perspective en translateZ
Hero met twee lagen in een eigen scroller
Scroll binnen het kader. De gestreepte laag staat op translateZ(-2px) en is met 3 geschaald, dus hij beweegt met een derde van de scrollsnelheid.
Methode 2: scroll-driven met view()
Afbeelding die meedrijft terwijl haar sectie over het scherm gaat
De animatie draait alleen waar animation-timeline ondersteund wordt en de lezer niet om minder beweging heeft gevraagd.
Fallback in JavaScript
Kleine parallax met requestAnimationFrame
Alleen gebruikt als scroll-driven animations ontbreken. De listener is passive en het werk gebeurt één keer per frame.
Diepte-playground
Diepte achterste laag (translateZ): {n}px
Benodigde schaal: {v}
Snelheid achterste laag: {v} van het scrollen
Parallax-preview, scroll erbinnen
Tekst vooraan beweegt op volle snelheid
Blijf scrollen om de achterste laag te zien achterblijven.
Uw apparaat vraagt om minder beweging, dus de preview staat stil.