Scroll Layout Formations Nieuw

<!-- Scroll Layout Formations · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="lof"><div class="lof__scroll"><div class="lof__track"><div class="lof__sticky">
<div class="lof__t lof__t--a">Delft</div><div class="lof__t lof__t--b">Leiden</div><div class="lof__t lof__t--c">Gouda</div><div class="lof__t lof__t--b">Breda</div><div class="lof__t lof__t--a">Utrecht</div><div class="lof__t lof__t--c">Haarlem</div><div class="lof__t lof__t--a">Zwolle</div><div class="lof__t lof__t--c">Venlo</div><div class="lof__t lof__t--b">Assen</div>
<span class="lof__lab">stapel</span></div></div></div><span class="lof__hint">scroll &darr;</span></div>
</div>

/* Scroll Layout Formations · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.lof{position:absolute;inset:0;background:#f4f3f1;font-family:'Switzer',system-ui,sans-serif;overflow:hidden}
.lof__scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.lof__scroll::-webkit-scrollbar{display:none}
.lof__track{height:320%;position:relative}
.lof__sticky{position:sticky;top:0;height:31.25%;overflow:hidden}
.lof__t{position:absolute;left:50%;top:50%;border-radius:4px;display:flex;align-items:flex-end;padding:5px 6px;font-size:10px;font-weight:600;will-change:transform;box-shadow:0 1px 2px rgba(10,10,10,.12)}
.lof__t--a{background:#F5480F;color:#fff}.lof__t--b{background:#0a0a0a;color:#fff}.lof__t--c{background:#fff;color:#0a0a0a}
.lof__lab,.lof__hint{position:absolute;bottom:10px;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.55);pointer-events:none}
.lof__lab{left:12px}.lof__hint{right:12px}

// Scroll Layout Formations · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.lof')||root;var sc=root.querySelector('.lof__scroll'),st=root.querySelector('.lof__sticky'),lab=root.querySelector('.lof__lab'),tiles=[].slice.call(root.querySelectorAll('.lof__t'));var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
var rnd=[[-6,4,-14],[8,-5,11],[-3,-7,6],[5,6,-20],[0,0,3],[-9,2,17],[4,-3,-8],[-2,8,22],[7,1,-4]];var W,H,w,h,cur=0,raf=0;
function size(){W=st.clientWidth;H=st.clientHeight;w=Math.min(W*.2,H*.27);h=w*.64;tiles.forEach(function(t){t.style.width=w+'px';t.style.height=h+'px';t.style.marginLeft=(-w/2)+'px';t.style.marginTop=(-h/2)+'px';});}
function form(i,p){var pile=[rnd[i][0]*2,rnd[i][1]*2-8,rnd[i][2]];var a=i/9*Math.PI*2-Math.PI/2,R=Math.min(W*.34,H*.34);var ring=[Math.cos(a)*R*1.25,Math.sin(a)*R-6,a*180/Math.PI+90];var c=i%3,r=Math.floor(i/3);var grid=[(c-1)*(w+8),(r-1)*(h+7)-8,0];
var A,B,q;if(p<.5){A=pile;B=ring;q=p/.5;}else{A=ring;B=grid;q=(p-.5)/.5;}q=q<.5?2*q*q:1-Math.pow(-2*q+2,2)/2;return[A[0]+(B[0]-A[0])*q,A[1]+(B[1]-A[1])*q,A[2]+(B[2]-A[2])*q];}
function draw(p){tiles.forEach(function(t,i){var f=form(i,p);t.style.transform='translate3d('+f[0].toFixed(1)+'px,'+f[1].toFixed(1)+'px,0) rotate('+f[2].toFixed(1)+'deg)';});lab.textContent=p<.25?'stapel':p<.75?'cirkel':'raster';}
function target(){var m=sc.scrollHeight-sc.clientHeight;return m>0?Math.min(1,sc.scrollTop/m):0;}
function tick(){var t=target();cur+=(t-cur)*(reduce?1:.14);if(Math.abs(t-cur)<.001)cur=t;draw(cur);raf=cur!==t?requestAnimationFrame(tick):0;}
size();draw(0);sc.addEventListener('scroll',function(){if(!raf)raf=requestAnimationFrame(tick);},{passive:true});addEventListener('resize',function(){size();draw(cur);});
}
init(document.querySelector('.jouw-container'));