Parallax-lagen

<!-- Parallax-lagen · NedDev · eigen werk. -->
<!-- benodigd, één keer per pagina: -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>

<div class="jouw-container">
<div class="splx-root"><div class="splx-layer splx-sky" data-depth="0.15"></div><div class="splx-layer splx-mid" data-depth="0.45"></div><h3 class="splx-title" data-depth="0.7">DIEPTE</h3><div class="splx-layer splx-fore" data-depth="0.9"></div></div>
</div>

/* Parallax-lagen · NedDev · eigen werk. */
.splx-root{position:absolute;inset:0;overflow:hidden;background:#0a0e1a}
.splx-layer{position:absolute;left:0;width:100%;will-change:transform}
.splx-sky{inset:0;background:radial-gradient(120% 80% at 50% -10%,#3a2516,#0a0e1a 70%)}
.splx-mid{bottom:0;height:55%;background:linear-gradient(#5a2410,#0c1226);clip-path:polygon(0 35%,20% 20%,45% 40%,70% 18%,100% 38%,100% 100%,0 100%)}
.splx-fore{bottom:0;height:32%;background:#06080f;clip-path:polygon(0 50%,30% 30%,60% 55%,100% 28%,100% 100%,0 100%)}
.splx-title{position:absolute;top:24%;left:0;width:100%;text-align:center;margin:0;font:900 clamp(32px,12vw,80px) 'Boldonse','Switzer',sans-serif;color:#fff;will-change:transform}

// Parallax-lagen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
if(!window.gsap)return;root.querySelectorAll('[data-depth]').forEach(function(el){var d=parseFloat(el.dataset.depth);gsap.fromTo(el,{yPercent:-d*22},{yPercent:d*22,ease:'none',scrollTrigger:{trigger:root,start:'top bottom',end:'bottom top',scrub:true}});});
}
init(document.querySelector('.jouw-container'));