Regel licht op, beeld springt uit Nieuw

<!-- Regel licht op, beeld springt uit · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="rhb"><div class="rhb__sc" tabindex="0" aria-label="Diensten van Warmte en Zo, Apeldoorn">
<p class="rhb__k">[ Wat we doen · Warmte en Zo, Apeldoorn ]</p>
<ol class="rhb__lijst">
<li class="rhb__r"><p>We plaatsen <mark>warmtepompen</mark> die je buren niet horen.</p><figure class="rhb__f"><figcaption>[ warmtepomp ]</figcaption><img src="https://neddev.com/lab-media/regel-highlight-beeld-1.webp" alt="Buitenunit van een warmtepomp tegen een bakstenen gevel" loading="lazy"></figure></li>
<li class="rhb__r"><p>Twaalf <mark>zonnepanelen</mark> op een rijtjeshuis, in één dag gelegd.</p><figure class="rhb__f"><figcaption>[ zonnepanelen ]</figcaption><img src="https://neddev.com/lab-media/regel-highlight-beeld-2.webp" alt="Zwarte zonnepanelen op een dak met oranje pannen" loading="lazy"></figure></li>
<li class="rhb__r"><p><mark>Vloerverwarming</mark> in een bestaand huis, gefreesd zonder breekwerk.</p><figure class="rhb__f"><figcaption>[ vloerverwarming ]</figcaption><img src="https://neddev.com/lab-media/regel-highlight-beeld-3.webp" alt="Leidingen voor vloerverwarming in een woonkamer" loading="lazy"></figure></li>
<li class="rhb__r"><p>Een nieuwe <mark>cv-ketel</mark>, bij storing binnen 24 uur geplaatst.</p><figure class="rhb__f"><figcaption>[ cv-ketel ]</figcaption><img src="https://neddev.com/lab-media/regel-highlight-beeld-5.webp" alt="Witte cv-ketel met koperen leidingen op zolder" loading="lazy"></figure></li>
</ol>
<p class="rhb__na">[ 4 vaklieden · erkend installateur · sinds 2009 ]</p></div></div>
</div>

/* Regel licht op, beeld springt uit · NedDev · eigen werk. */
.rhb{position:absolute;inset:0;background:#0f1412;color:#f1efe9;font-family:'Switzer',system-ui,sans-serif;container-type:size}
.rhb__sc{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#444 transparent}
.rhb__sc:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.rhb__k{position:sticky;top:0;z-index:2;margin:0;padding:10px 14px;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#a9b0ab;background:linear-gradient(#0f1412 70%,rgba(15,20,18,0))}
.rhb__lijst{list-style:none;margin:0;padding:24cqh 14px 40cqh}
.rhb__r{position:relative;view-timeline:--rhb-v block;padding:14px 0}
.rhb__r p{margin:0;width:62%;font:600 clamp(15px,5.2cqi,32px)/1.12 'Switzer',sans-serif;letter-spacing:-.02em}
.rhb__r mark{background:none;color:inherit;box-shadow:inset 0 -.12em 0 #F5480F}
.rhb__f{position:absolute;right:0;top:50%;width:33%;margin:0;transform:translateY(-50%) rotate(-2deg);transform-origin:20% 50%}
.rhb__f img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}
.rhb__f figcaption{display:inline-block;margin-bottom:4px;font:600 9px/1 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;background:#f1efe9;color:#0f1412;padding:3px 4px;border-radius:2px}
.rhb__na{margin:0;padding:0 14px 20px;font:500 10px 'JetBrains Mono',monospace;color:#a9b0ab}
@supports (animation-timeline: view()){
.rhb__r p{animation:rhb-regel linear both;animation-timeline:--rhb-v;animation-range:cover 0% cover 100%}
.rhb__f{animation:rhb-beeld linear both;animation-timeline:--rhb-v;animation-range:cover 0% cover 100%}
}
@keyframes rhb-regel{0%,30%{opacity:.22}44%,56%{opacity:1}70%,100%{opacity:.22}}
@keyframes rhb-beeld{0%,34%{opacity:0;transform:translateY(-42%) rotate(-6deg) scale(.82)}46%,54%{opacity:1;transform:translateY(-50%) rotate(-2deg) scale(1)}66%,100%{opacity:0;transform:translateY(-58%) rotate(2deg) scale(.86)}}
.rhb.is-js .rhb__r p{opacity:.22;transition:opacity .3s}
.rhb.is-js .rhb__f{opacity:0;transform:translateY(-44%) rotate(-6deg) scale(.82);transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.rhb.is-js .rhb__r.is-on p{opacity:1}
.rhb.is-js .rhb__r.is-on .rhb__f{opacity:1;transform:translateY(-50%) rotate(-2deg) scale(1)}
@media (prefers-reduced-motion: reduce){.rhb__r p,.rhb__f,.rhb.is-js .rhb__r p,.rhb.is-js .rhb__f{animation:none!important;opacity:1!important;transform:translateY(-50%)!important;transition:none!important}}

// Regel licht op, beeld springt uit · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.rhb')||root;function lab_drift(sc,host,speed){if(matchMedia('(prefers-reduced-motion: reduce)').matches)return;var on=true,t0=0;function stop(){on=false;}
['wheel','touchstart','pointerdown','keydown','focusin'].forEach(function(ev){host.addEventListener(ev,stop,{passive:true});});
function f(now){if(!on)return;if(!t0)t0=now;var max=sc.scrollHeight-sc.clientHeight,ph=(now-t0)/1000*speed;sc.scrollTop=max*(.5-.5*Math.cos(ph));requestAnimationFrame(f);}
setTimeout(function(){if(on)requestAnimationFrame(f);},900);}
var sc=root.querySelector('.rhb__sc'),rs=[].slice.call(root.querySelectorAll('.rhb__r'));
if(!(window.CSS&&CSS.supports&&CSS.supports('animation-timeline: view()'))){root.classList.add('is-js');var tk=false;
  function upd(){tk=false;var mid=sc.scrollTop+sc.clientHeight/2,best=-1,bd=sc.clientHeight*.3;rs.forEach(function(r,k){var d=Math.abs(r.offsetTop+r.offsetHeight/2-mid);if(d<bd){bd=d;best=k;}});rs.forEach(function(r,k){r.classList.toggle('is-on',k===best);});}
  sc.addEventListener('scroll',function(){if(!tk){tk=true;requestAnimationFrame(upd);}},{passive:true});upd();}
lab_drift(sc,root,.28);
}
init(document.querySelector('.jouw-container'));