Repeating Image Transition Nieuw

<!-- Repeating Image Transition · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="rit"><div class="rit__grid">
<button class="rit__th rit__v1" data-t="Villa Wassenaar" data-m="Nieuwbouw · 340 m2 · 2025"><span>01</span></button>
<button class="rit__th rit__v2" data-t="Kantoor Delft" data-m="Renovatie · 1.200 m2 · 2026"><span>02</span></button>
<button class="rit__th rit__v3" data-t="Bakkerij Rijswijk" data-m="Winkelinterieur · 2025"><span>03</span></button>
<button class="rit__th rit__v4" data-t="Kas Naaldwijk" data-m="Bedrijfshal · 4.800 m2 · 2024"><span>04</span></button>
<button class="rit__th rit__v2" data-t="School Voorburg" data-m="Verduurzaming · 2026"><span>05</span></button>
<button class="rit__th rit__v1" data-t="Hotel Noordwijk" data-m="Uitbreiding · 64 kamers · 2025"><span>06</span></button>
</div><p class="rit__hint">Klik een project</p>
<div class="rit__panel"><div class="rit__img"></div><div class="rit__txt"><span class="rit__no"></span><h4 class="rit__t"></h4><p class="rit__m"></p><button class="rit__back">&larr; Terug</button></div></div></div>
</div>

/* Repeating Image Transition · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.rit{position:absolute;inset:0;background:#f4f3f1;font-family:'Switzer',system-ui,sans-serif;overflow:hidden}
.rit__grid{position:absolute;left:14px;right:14px;top:14px;bottom:38px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:8px;transition:opacity .35s}
.rit__th{border:0;border-radius:4px;cursor:pointer;padding:7px;display:flex;align-items:flex-start;font:600 10px 'JetBrains Mono',monospace;color:#fff;transition:transform .25s}
.rit__th:hover{transform:translateY(-2px)}
.rit__th:focus-visible{outline:2px solid #0a0a0a;outline-offset:2px}
.rit__v1{background:linear-gradient(150deg,#F5480F,#9c2a05)}
.rit__v2{background:linear-gradient(150deg,#2a2a2a,#0a0a0a)}
.rit__v3{background:linear-gradient(150deg,#d9d4cc,#a8a196);color:#0a0a0a}
.rit__v4{background:repeating-linear-gradient(90deg,#0a0a0a 0 6px,#F5480F 6px 12px)}
.rit__hint{position:absolute;left:14px;bottom:10px;margin:0;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.55)}
.rit__panel{position:absolute;inset:14px;display:flex;gap:14px;opacity:0;pointer-events:none}
.rit.is-open .rit__panel{opacity:1;pointer-events:auto}
.rit.is-open .rit__grid,.rit.is-open .rit__hint{opacity:0;pointer-events:none}
.rit__img{flex:0 0 58%;border-radius:4px}
.rit__txt{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.rit__no{font:500 10px 'JetBrains Mono',monospace;color:#F5480F;letter-spacing:.12em}
.rit__t{margin:6px 0 4px;font:800 15px/1.15 'Boldonse','Switzer',system-ui,sans-serif;font-synthesis:none;color:#0a0a0a}
.rit__m{margin:0 0 10px;font-size:12px;color:rgba(10,10,10,.7)}
.rit__back{align-self:flex-start;border:1px solid #0a0a0a;background:none;border-radius:999px;padding:5px 11px;font:600 11px 'Switzer',system-ui,sans-serif;cursor:pointer;color:#0a0a0a}
.rit__back:hover{background:#0a0a0a;color:#fff}
.rit__clone{position:absolute;border-radius:4px;transform-origin:0 0;pointer-events:none;z-index:3}
.rit__txt>*{opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.rit.is-open .rit__txt>*{opacity:1;transform:none}
.rit.is-open .rit__txt>*:nth-child(2){transition-delay:.06s}.rit.is-open .rit__txt>*:nth-child(3){transition-delay:.12s}.rit.is-open .rit__txt>*:nth-child(4){transition-delay:.18s}
@media(prefers-reduced-motion:reduce){.rit__grid,.rit__txt>*{transition:none}}

// Repeating Image Transition · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.rit')||root;var img=root.querySelector('.rit__img'),busy=false;var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
function rel(el){var a=el.getBoundingClientRect(),b=root.getBoundingClientRect();return{x:a.left-b.left,y:a.top-b.top,w:a.width,h:a.height};}
root.querySelectorAll('.rit__th').forEach(function(th,idx){th.addEventListener('click',function(){if(busy)return;busy=true;var v=[].slice.call(th.classList).filter(function(c){return c.indexOf('rit__v')===0;})[0];
img.className='rit__img '+v;root.querySelector('.rit__t').textContent=th.dataset.t;root.querySelector('.rit__m').textContent=th.dataset.m;root.querySelector('.rit__no').textContent='PROJECT 0'+(idx+1);
var s=rel(th),t=rel(img);if(reduce||!Element.prototype.animate){root.classList.add('is-open');busy=false;return;}
var n=6,last=null;for(var i=0;i<n;i++){(function(i){var c=document.createElement('div');c.className='rit__clone '+v;c.style.left=t.x+'px';c.style.top=t.y+'px';c.style.width=t.w+'px';c.style.height=t.h+'px';root.appendChild(c);
var from='translate('+(s.x-t.x)+'px,'+(s.y-t.y)+'px) scale('+(s.w/t.w)+','+(s.h/t.h)+')';var p=(i+1)/n;var mid='translate('+((s.x-t.x)*(1-p))+'px,'+((s.y-t.y)*(1-p))+'px) scale('+(s.w/t.w+(1-s.w/t.w)*p)+','+(s.h/t.h+(1-s.h/t.h)*p)+')';
var a=c.animate([{transform:from,opacity:1},{transform:mid,opacity:1,offset:.85},{transform:mid,opacity:i===n-1?1:0}],{duration:520+i*40,delay:i*55,easing:'cubic-bezier(.7,0,.25,1)',fill:'both'});if(i===n-1){c.animate([{transform:mid},{transform:'none'}],{duration:1,delay:520+i*95,fill:'forwards'});last=a;}
a.onfinish=function(){if(i===n-1){root.classList.add('is-open');setTimeout(function(){root.querySelectorAll('.rit__clone').forEach(function(x){x.remove();});busy=false;},60);}};})(i);}
th.blur();});});
root.querySelector('.rit__back').addEventListener('click',function(){root.classList.remove('is-open');});
}
init(document.querySelector('.jouw-container'));