Middelste regel uitgelicht New

In a scrolling list of services only the line in the middle becomes large and black, the rest stays small and grey. In Chrome, Edge and Safari 26 fully CSS (animation-timeline: view() with a cover range); in Firefox a small IntersectionObserver takes over. Scroll-snap keeps a line neatly centred.

Installatiebedrijf Brouwer · Zwolle

01Cv-ketel vervangen
02Warmtepomp hybride
03Vloerverwarming frezen
04Zonnepanelen op plat dak
05Thuisbatterij
06Badkamer installatie
07Ventilatie WTW
08Storingsdienst 24/7
09Laadpaal aan huis

How to use it

Paste the HTML where the scroll effects should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- 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'));

More scroll effects

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →