1. Mechanisme — kopieer 1-op-1, geen styling-keuzes
// Mechanisme: hero-parallax-layers-quiet
import gsap from 'https://esm.sh/gsap@3.12.5';
import { ScrollTrigger } from 'https://esm.sh/gsap@3.12.5/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray('[data-parallax]').forEach(layer => {
const speed = parseFloat(layer.dataset.parallax) || 0.5;
gsap.to(layer, { yPercent: -20 * speed, ease: 'none',
scrollTrigger: { trigger: layer.parentElement, start: 'top bottom', end: 'bottom top', scrub: 1 }
});
}); 2. Skeleton — DOM + class-namen, mag herschikken
<!-- Skeleton: hero-parallax-layers-quiet -->
<div class="parallax-hero">
<div data-parallax="0.3" class="bg-layer"></div>
<div data-parallax="0.7" class="mid-layer"></div>
<div class="fg-content">Headline</div>
</div>
3. Styling-template — verplicht eigen invulling per merk
/* Styling: hero-parallax-layers-quiet */
.parallax-hero { position: relative; overflow: hidden; min-height: 100vh; }
[data-parallax] { position: absolute; inset: -20%; pointer-events: none; }