Middelste regel uitgelicht Nieuw

<!-- Middelste regel uitgelicht · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="mdu">
  <span class="mdu__k">Installatiebedrijf Brouwer · Zwolle</span>
  <ul class="mdu__list" tabindex="0" aria-label="Diensten, scrollbaar">
    <li class="mdu__it"><span>01</span>Cv-ketel vervangen</li>
    <li class="mdu__it"><span>02</span>Warmtepomp hybride</li>
    <li class="mdu__it"><span>03</span>Vloerverwarming frezen</li>
    <li class="mdu__it"><span>04</span>Zonnepanelen op plat dak</li>
    <li class="mdu__it"><span>05</span>Thuisbatterij</li>
    <li class="mdu__it"><span>06</span>Badkamer installatie</li>
    <li class="mdu__it"><span>07</span>Ventilatie WTW</li>
    <li class="mdu__it"><span>08</span>Storingsdienst 24/7</li>
    <li class="mdu__it"><span>09</span>Laadpaal aan huis</li>
  </ul>
  <span class="mdu__line" aria-hidden="true"></span>
</div>
</div>

/* Middelste regel uitgelicht · NedDev · eigen werk. */
.mdu{position:absolute;inset:0;background:#fff;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;overflow:hidden}
.mdu__k{position:absolute;left:16px;top:10px;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#5f5a54}
.mdu__list{list-style:none;margin:0;padding:0 16px;position:absolute;inset:30px 0 0;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;
  -webkit-mask:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.mdu__list::-webkit-scrollbar{display:none}
.mdu__list:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.mdu__list{padding-block:calc((100cqh - 30px) / 2 - 20px)}
.mdu{container-type:size}
.mdu__it{scroll-snap-align:center;display:flex;align-items:baseline;gap:12px;height:40px;line-height:40px;font-weight:700;font-size:22px;letter-spacing:-.02em;white-space:nowrap;color:#b3aea7;transform-origin:left center;transform:scale(.78);transition:color .25s,transform .25s}
.mdu__it span{font:500 11px 'JetBrains Mono',monospace;color:#b3aea7;transition:color .25s}
.mdu__it.is-mid{color:#0a0a0a;transform:none}.mdu__it.is-mid span{color:#F5480F}
.mdu__line{position:absolute;left:0;top:calc(30px + (100% - 30px) / 2 - 20px);width:4px;height:40px;background:#F5480F}
@supports (animation-timeline: view()){
  .mdu__it{transition:none;animation:mdu-hl linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .mdu__it span{transition:none;animation:mdu-num linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
}
@keyframes mdu-hl{0%,30%{color:#b3aea7;transform:scale(.78)}50%{color:#0a0a0a;transform:none}70%,100%{color:#b3aea7;transform:scale(.78)}}
@keyframes mdu-num{0%,40%{color:#b3aea7}50%{color:#F5480F}60%,100%{color:#b3aea7}}
@media (prefers-reduced-motion:reduce){.mdu__list{scroll-behavior:auto}}
@media (max-width:420px){.mdu__it{font-size:19px}}

// Middelste regel uitgelicht · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.mdu')||root;
var l0=root.querySelector('.mdu__list'),i2=root.querySelectorAll('.mdu__it')[2];if(i2)l0.scrollTop=i2.offsetTop-l0.clientHeight/2+i2.offsetHeight/2;
if(window.CSS&&CSS.supports&&CSS.supports('animation-timeline: view()'))return;
var list=root.querySelector('.mdu__list'),items=[].slice.call(root.querySelectorAll('.mdu__it'));
if(!('IntersectionObserver' in window)){items[0].classList.add('is-mid');return;}
var io=new IntersectionObserver(function(es){es.forEach(function(e){e.target.classList.toggle('is-mid',e.isIntersecting);});},{root:list,rootMargin:'-48% 0px -48% 0px'});
items.forEach(function(it){io.observe(it);});
}
init(document.querySelector('.jouw-container'));