In-beeld-animaties met data-in Nieuw

<!-- In-beeld-animaties met data-in · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ent">
<div class="ent__bar">
<div class="ent__btns" role="group" aria-label="Preset opnieuw afspelen"><button class="ent__b" type="button" data-play="fade">fade</button><button class="ent__b" type="button" data-play="rise">rise</button><button class="ent__b" type="button" data-play="scale">scale</button></div>
<label class="ent__opt"><input class="ent__rm" type="checkbox"><span>Minder beweging</span></label>
</div>
<div class="ent__sc" tabindex="0" aria-label="Voorbeeld: scroll om de in-beeld-animaties te zien">
<div class="ent__in">
<h3 class="ent__h" data-in="fade">Een bank kies je met je rug</h3>
<p class="ent__p" data-in="rise">Bij Woonwinkel Hofstede in Zwolle zit je eerst tien minuten op elke bank die je overweegt. Pas dan praten we over stof en kleur.</p>
<img class="ent__img" data-in="scale" src="https://neddev.com/lab-media/categorie-panelen-1.webp" alt="Antraciet velours bank in een lichte showroom" loading="lazy">
<p class="ent__p" data-in="rise">Levertijd voor banken op maat is zes tot acht weken. Bezorgen in Overijssel is gratis.</p>
<div class="ent__duo"><img class="ent__img" data-in="scale" src="https://neddev.com/lab-media/categorie-panelen-2.webp" alt="Eikenhouten eettafel met zes stoelen" loading="lazy"><img class="ent__img" data-in="scale" src="https://neddev.com/lab-media/categorie-panelen-3.webp" alt="Notenhouten boekenkast in een woonkamer" loading="lazy"></div>
<p class="ent__p" data-in="fade">Met minder beweging, of zonder JavaScript, staat al deze tekst direct in beeld.</p>
</div>
</div>
</div>
</div>

/* In-beeld-animaties met data-in · NedDev · eigen werk. */
.ent{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;color:#0a0a0a;font-family:'Switzer',sans-serif;text-align:left;--ent-dur:.6s;--ent-ease:cubic-bezier(.2,.7,.2,1);--ent-stap:80ms}
.ent *,.ent *::before,.ent *::after{box-sizing:border-box}
.ent__bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid #e4e2de}
.ent__btns{display:flex;gap:6px}
.ent__b{margin:0;padding:6px 10px;border:1px solid #cfccc7;border-radius:4px;background:#fff;color:#0a0a0a;font:500 12px/1 'Switzer',sans-serif;cursor:pointer;transition:border-color .16s,background-color .16s}
.ent__b:hover{border-color:#0a0a0a}
.ent__b:active{background:#f4f3f1}
.ent__b:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.ent__opt{display:flex;align-items:center;gap:6px;font:500 12px/1 'Switzer',sans-serif;cursor:pointer}
.ent__rm{width:16px;height:16px;margin:0;accent-color:#0a0a0a}
.ent__rm:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.ent__sc{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.ent__sc:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.ent__in{padding:14px 16px 24px;display:flex;flex-direction:column;gap:12px;max-width:560px}
.ent__h{margin:0;font:700 clamp(18px,5vw,26px)/1.1 'Switzer',sans-serif;letter-spacing:-.02em}
.ent__p{margin:0;font:400 14px/1.5 'Switzer',sans-serif;color:#3d3b38}
.ent__img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;background:#e4e2de}
.ent__duo{display:flex;gap:8px}
.ent__duo .ent__img{flex:1 1 0;min-width:0;aspect-ratio:4/3}
@media (prefers-reduced-motion:no-preference){
.ent--aan [data-in]{transition:opacity var(--ent-dur) var(--ent-ease),transform var(--ent-dur) var(--ent-ease);transition-delay:calc(var(--ent-i,0)*var(--ent-stap))}
.ent--aan [data-in]:not(.is-in){opacity:0}
.ent--aan [data-in="rise"]:not(.is-in){transform:translateY(18px)}
.ent--aan [data-in="scale"]:not(.is-in){transform:scale(.94)}}
.ent--stil [data-in]{opacity:1!important;transform:none!important;transition:none!important}

// In-beeld-animaties met data-in · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ent');if(!w)return;
var sc=w.querySelector('.ent__sc'),els=[].slice.call(w.querySelectorAll('[data-in]')),mq=matchMedia('(prefers-reduced-motion: reduce)'),io=null;
function allIn(){els.forEach(function(el){el.classList.add('is-in');});}
if(!('IntersectionObserver' in window)||mq.matches){allIn();}
else{w.classList.add('ent--aan');
io=new IntersectionObserver(function(es){var k=0;es.forEach(function(e){if(e.isIntersecting){e.target.style.setProperty('--ent-i',k++);e.target.classList.add('is-in');io.unobserve(e.target);}});},{root:sc,rootMargin:'0px 0px -8% 0px',threshold:.15});
els.forEach(function(el){io.observe(el);});
var tk=false;sc.addEventListener('scroll',function(){if(tk)return;tk=true;requestAnimationFrame(function(){tk=false;var top=sc.getBoundingClientRect().top;els.forEach(function(el){if(!el.classList.contains('is-in')&&el.getBoundingClientRect().bottom<top){el.classList.add('is-in');io.unobserve(el);}});});},{passive:true});}
if(mq.addEventListener)mq.addEventListener('change',function(){if(mq.matches)allIn();});
window.addEventListener('beforeprint',allIn);
w.querySelector('.ent__rm').addEventListener('change',function(e){w.classList.toggle('ent--stil',e.target.checked);});
[].forEach.call(w.querySelectorAll('.ent__b'),function(b){b.addEventListener('click',function(){var kind=b.getAttribute('data-play'),r=sc.getBoundingClientRect(),k=0;
els.forEach(function(el){if(el.getAttribute('data-in')!==kind)return;var q=el.getBoundingClientRect();if(q.bottom<r.top||q.top>r.bottom)return;el.style.setProperty('--ent-i',k++);el.classList.remove('is-in');void el.offsetWidth;
requestAnimationFrame(function(){requestAnimationFrame(function(){el.classList.add('is-in');});});});});});
}
init(document.querySelector('.jouw-container'));