Regel licht op, beeld springt uit New

Service list that lights up line by line while scrolling; beside the active line a small labelled image pops out at the keyword. Pure CSS with a view-timeline per line (animation-timeline); without support a small script takes over using the line closest to the centre. With prefers-reduced-motion all lines are full and images static.

[ Wat we doen · Warmte en Zo, Apeldoorn ]

We plaatsen warmtepompen die je buren niet horen.
[ warmtepomp ]
Twaalf zonnepanelen op een rijtjeshuis, in één dag gelegd.
[ zonnepanelen ]
Vloerverwarming in een bestaand huis, gefreesd zonder breekwerk.
[ vloerverwarming ]
Een nieuwe cv-ketel, bij storing binnen 24 uur geplaatst.
[ cv-ketel ]

[ 4 vaklieden · erkend installateur · sinds 2009 ]

How to use it

Paste the HTML where the text animations 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.

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

More text animations

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 →