Elastic Grid Scroll Nieuw

<!-- Elastic Grid Scroll · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="egs"><div class="egs__scroll"><div class="egs__head"><span>Projecten 2025 / 2026</span><span>scroll &darr;</span></div><div class="egs__grid">
<div class="egs__col"><div class="egs__tile egs__tile--a"><span>Villa Wassenaar</span></div><div class="egs__tile egs__tile--c"><span>Kantoor Delft</span></div><div class="egs__tile egs__tile--b"><span>Loods Westland</span></div><div class="egs__tile egs__tile--d"><span>Praktijk Leiden</span></div><div class="egs__tile egs__tile--c"><span>Winkel Gouda</span></div></div>
<div class="egs__col"><div class="egs__tile egs__tile--b"><span>Dakopbouw Zoetermeer</span></div><div class="egs__tile egs__tile--d"><span>Atelier Haarlem</span></div><div class="egs__tile egs__tile--a"><span>Bakkerij Rijswijk</span></div><div class="egs__tile egs__tile--c"><span>School Voorburg</span></div><div class="egs__tile egs__tile--b"><span>Hotel Noordwijk</span></div></div>
<div class="egs__col"><div class="egs__tile egs__tile--c"><span>Garage Pijnacker</span></div><div class="egs__tile egs__tile--a"><span>Woning Utrecht</span></div><div class="egs__tile egs__tile--b"><span>Kliniek Breda</span></div><div class="egs__tile egs__tile--d"><span>Kas Naaldwijk</span></div><div class="egs__tile egs__tile--a"><span>Studio Den Haag</span></div></div>
</div></div></div>
</div>

/* Elastic Grid Scroll · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.egs{position:absolute;inset:0;background:#f4f3f1;font-family:'Switzer',system-ui,sans-serif}
.egs__scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.egs__head{display:flex;justify-content:space-between;padding:12px 14px;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#0a0a0a}
.egs__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 14px 70px}
.egs__col{display:flex;flex-direction:column;gap:8px;will-change:transform}
.egs__col:nth-child(2){margin-top:26px}
.egs__tile{aspect-ratio:4/5;border-radius:4px;display:flex;align-items:flex-end;padding:8px;font-size:11px;font-weight:600;line-height:1.2;overflow:hidden}
.egs__tile--a{background:#F5480F;color:#fff}
.egs__tile--b{background:#0a0a0a;color:#fff}
.egs__tile--c{background:#dedad4;color:#0a0a0a}
.egs__tile--d{background:linear-gradient(160deg,#F5480F 0%,#0a0a0a 85%);color:#fff}

// Elastic Grid Scroll · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.egs')||root;var sc=root.querySelector('.egs__scroll'),cols=[].slice.call(root.querySelectorAll('.egs__col'));
if(matchMedia('(prefers-reduced-motion: reduce)').matches)return;
var k=[.16,.07,.11],pos=cols.map(function(){return 0;}),raf=0;
function tick(){var y=sc.scrollTop,moving=false;cols.forEach(function(c,i){pos[i]+=(y-pos[i])*k[i];var d=y-pos[i];if(Math.abs(d)>.2)moving=true;else{pos[i]=y;d=0;}d=Math.max(-90,Math.min(90,d));c.style.transform='translate3d(0,'+d.toFixed(2)+'px,0)';});raf=moving?requestAnimationFrame(tick):0;}
sc.addEventListener('scroll',function(){if(!raf)raf=requestAnimationFrame(tick);},{passive:true});
}
init(document.querySelector('.jouw-container'));