Vast beeld, wisselende tekst Nieuw

<!-- Vast beeld, wisselende tekst · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="smw"><div class="smw__sc" tabindex="0" aria-label="Werkwijze in drie stappen"><div class="smw__grid"><div class="smw__media"><div class="smw__fr">
<div class="smw__a smw__a--0 is-on"><i></i><i></i><i></i><em>3.600</em></div><div class="smw__a smw__a--1"><i></i><i></i><i></i></div><div class="smw__a smw__a--2"><i></i><i></i><i></i><i></i></div>
<span class="smw__no">01 / 03</span><span class="smw__pb"><span></span></span></div></div>
<div class="smw__txt"><div class="smw__st is-on"><span class="smw__kk">Stap 1</span><h5>Ontwerp aan tafel</h5><p>We tekenen uw keuken samen in 3D, op de millimeter, in onze showroom in Veenendaal.</p></div>
<div class="smw__st"><span class="smw__kk">Stap 2</span><h5>Gemaakt in eigen werkplaats</h5><p>Fronten en kasten zagen en lakken we zelf. Levertijd: zes weken na akkoord.</p></div>
<div class="smw__st"><span class="smw__kk">Stap 3</span><h5>Geplaatst in één dag</h5><p>Twee monteurs, één dag, en het oude keukenblok nemen we mee.</p></div></div></div></div></div>
</div>

/* Vast beeld, wisselende tekst · NedDev · eigen werk. */
.smw{position:absolute;inset:0;background:#fff;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;container-type:size}
.smw__sc{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;outline:none}
.smw__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:16px;padding:0 14px}
.smw__media{position:relative}
.smw__fr{position:sticky;top:12px;height:calc(100cqh - 24px);border-radius:5px;overflow:hidden;background:#f4f3f1}
.smw__a{position:absolute;inset:0;clip-path:inset(100% 0 0 0);transition:clip-path .7s cubic-bezier(.7,0,.2,1)}
.smw__a.is-on{clip-path:inset(0 0 0 0);z-index:1}.smw__a.is-past{clip-path:inset(0 0 0 0);z-index:0}
.smw__a i,.smw__a em{position:absolute;display:block}
.smw__a--0{background:repeating-linear-gradient(0deg,transparent 0 13px,#e2ddd6 13px 14px),repeating-linear-gradient(90deg,transparent 0 13px,#e2ddd6 13px 14px),#f4f3f1}
.smw__a--0 i:nth-child(1){left:14%;top:22%;width:72%;height:44%;border:2px solid #F5480F}
.smw__a--0 i:nth-child(2){left:14%;top:44%;width:30%;height:22%;border:2px solid #0a0a0a;border-left:0;border-bottom:0}
.smw__a--0 i:nth-child(3){left:14%;top:74%;width:72%;height:1px;background:#0a0a0a}
.smw__a--0 em{left:0;right:0;top:76%;text-align:center;font:500 9px 'JetBrains Mono',monospace;font-style:normal;color:#0a0a0a}
.smw__a--1{background:#F5480F}
.smw__a--1 i:nth-child(1){left:10%;right:10%;bottom:12%;height:46%;background:repeating-linear-gradient(0deg,#0a0a0a 0 9px,#c43a0b 9px 13px)}
.smw__a--1 i:nth-child(2){left:18%;right:30%;bottom:58%;height:10%;background:#0a0a0a;transform:rotate(-6deg)}
.smw__a--1 i:nth-child(3){left:0;right:0;bottom:0;height:12%;background:#2a2522}
.smw__a--2{background:#e9e4dc}
.smw__a--2 i:nth-child(1){left:8%;right:8%;top:14%;height:20%;background:repeating-linear-gradient(90deg,#0a0a0a 0 calc(25% - 1px),#3a3633 calc(25% - 1px) 25%)}
.smw__a--2 i:nth-child(2){left:8%;right:8%;top:56%;height:4%;background:#F5480F}
.smw__a--2 i:nth-child(3){left:8%;right:8%;top:60%;bottom:12%;background:repeating-linear-gradient(90deg,#0a0a0a 0 calc(33.3% - 1px),#3a3633 calc(33.3% - 1px) 33.3%)}
.smw__a--2 i:nth-child(4){left:40%;width:20%;top:66%;height:18%;border:2px solid #F5480F;border-radius:2px}
.smw__no{position:absolute;left:8px;top:8px;z-index:3;font:600 9.5px 'JetBrains Mono',monospace;background:#0a0a0a;color:#fff;padding:3px 6px;border-radius:3px;font-variant-numeric:tabular-nums}
.smw__pb{position:absolute;left:8px;right:8px;bottom:8px;height:3px;background:rgba(10,10,10,.15);z-index:3;border-radius:3px;overflow:hidden}
.smw__pb span{display:block;height:100%;width:33.3%;background:#0a0a0a;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.smw__txt{padding:12px 0 calc(50cqh - 40px)}
.smw__st{min-height:68cqh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .4s}
.smw__st.is-on{opacity:1}
.smw__kk{font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#F5480F}
.smw__st h5{margin:4px 0 5px;font:700 clamp(15px,5.4cqw,19px)/1.1 'Switzer',sans-serif;letter-spacing:-.025em}
.smw__st p{margin:0;font-size:12px;line-height:1.5;color:#4b4843}
@container (max-width:380px){.smw__grid{gap:10px;padding:0 10px}.smw__st p{font-size:11px}}
@media (prefers-reduced-motion:reduce){.smw__a,.smw__pb span{transition:none}}

// Vast beeld, wisselende tekst · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.smw')||root;
var sc=root.querySelector('.smw__sc'),sts=[].slice.call(root.querySelectorAll('.smw__st')),as=[].slice.call(root.querySelectorAll('.smw__a')),no=root.querySelector('.smw__no'),pb=root.querySelector('.smw__pb span');
var rm=matchMedia('(prefers-reduced-motion: reduce)').matches,cur=0,auto=!rm,t0=performance.now(),raf=0;
function upd(){var mid=sc.scrollTop+sc.clientHeight/2,best=0,bd=1e9;sts.forEach(function(s,i){var c=s.offsetTop+s.offsetHeight/2,d=Math.abs(c-mid);if(d<bd){bd=d;best=i;}});
if(best===cur)return;cur=best;sts.forEach(function(s,i){s.classList.toggle('is-on',i===best);});as.forEach(function(a,i){a.classList.toggle('is-on',i===best);a.classList.toggle('is-past',i<best);});
no.textContent='0'+(best+1)+' / 03';pb.style.width=((best+1)/3*100).toFixed(1)+'%';}
sc.addEventListener('scroll',upd,{passive:true});
function stop(){auto=false;}
['wheel','touchstart','pointerdown','keydown'].forEach(function(ev){root.addEventListener(ev,stop,{passive:true});});
function drift(now){if(!auto)return;var max=sc.scrollHeight-sc.clientHeight,ph=(now-t0)/1000*.32;sc.scrollTop=max*(.5-.5*Math.cos(ph));raf=requestAnimationFrame(drift);}
upd();if(auto)setTimeout(function(){t0=performance.now();raf=requestAnimationFrame(drift);},900);
}
init(document.querySelector('.jouw-container'));