Leesvoortgang in artikel New
Thin reading progress bar on top of an article, driven by CSS animation-timeline: scroll() with no JS for the bar, plus a small JS fallback for browsers without scroll-driven animations (such as Firefox). It sits in a sticky strip with the title and minutes left. Runs in its own scroll area; on a real page use scroll(root).
Blog · Verduurzamen
Hybride warmtepomp in een jaren-30-woning: waar let je op?
Een jaren-30-woning heeft vaak mooie details, maar ook enkel glas in de bovenlichten, een spouw die soms al is gevuld en soms niet, en radiatoren die op hoge temperatuur zijn berekend. Dat zijn precies de punten die bepalen of een hybride warmtepomp lekker draait.
1. Begin bij de schil
Laat eerst de spouw controleren. Een gevulde spouw en isolatie onder de vloer halen in een gemiddelde tussenwoning al snel 300 tot 500 m³ gas per jaar weg. Daarna kan de warmtepomp met een lagere watertemperatuur toe.
2. Kijk naar je radiatoren
Zet de cv-ketel een week op 55 graden. Blijft het in elke kamer warm genoeg, dan is je huis klaar voor een hybride systeem. Koud in de achterkamer? Dan helpt vaak één grotere radiator al.
3. Plek voor de buitenunit
De unit hangt het liefst aan de achtergevel of op een plat dak, minstens een meter van de erfgrens. Een monteur meet het geluid vooraf, zodat je zeker weet dat je binnen de regels blijft.
4. Subsidie en terugverdientijd
Met de ISDE-subsidie en een lager gasverbruik verdien je een hybride warmtepomp in een jaren-30-woning meestal in zeven tot negen jaar terug. Vraag twee offertes aan en vergelijk het vermogen, niet alleen de prijs.
Einde artikel. Vragen? Bel 010 123 4567.
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.
<!-- Leesvoortgang in artikel · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="lvg">
<div class="lvg__scroll" tabindex="0" aria-label="Artikel, scrollbaar">
<div class="lvg__strip"><span class="lvg__stitle">Hybride warmtepomp in een jaren-30-woning</span><span class="lvg__left">6 min</span><span class="lvg__track" aria-hidden="true"><span class="lvg__fill"></span></span></div>
<div class="lvg__art">
<p class="lvg__kicker">Blog · Verduurzamen</p>
<p class="lvg__h1">Hybride warmtepomp in een jaren-30-woning: waar let je op?</p>
<p class="lvg__meta">Lisa Bakker · di 7 okt 2026 · 6 min lezen</p>
<p>Een jaren-30-woning heeft vaak mooie details, maar ook enkel glas in de bovenlichten, een spouw die soms al is gevuld en soms niet, en radiatoren die op hoge temperatuur zijn berekend. Dat zijn precies de punten die bepalen of een hybride warmtepomp lekker draait.</p>
<p class="lvg__h2">1. Begin bij de schil</p>
<p>Laat eerst de spouw controleren. Een gevulde spouw en isolatie onder de vloer halen in een gemiddelde tussenwoning al snel 300 tot 500 m³ gas per jaar weg. Daarna kan de warmtepomp met een lagere watertemperatuur toe.</p>
<p class="lvg__h2">2. Kijk naar je radiatoren</p>
<p>Zet de cv-ketel een week op 55 graden. Blijft het in elke kamer warm genoeg, dan is je huis klaar voor een hybride systeem. Koud in de achterkamer? Dan helpt vaak één grotere radiator al.</p>
<p class="lvg__h2">3. Plek voor de buitenunit</p>
<p>De unit hangt het liefst aan de achtergevel of op een plat dak, minstens een meter van de erfgrens. Een monteur meet het geluid vooraf, zodat je zeker weet dat je binnen de regels blijft.</p>
<p class="lvg__h2">4. Subsidie en terugverdientijd</p>
<p>Met de ISDE-subsidie en een lager gasverbruik verdien je een hybride warmtepomp in een jaren-30-woning meestal in zeven tot negen jaar terug. Vraag twee offertes aan en vergelijk het vermogen, niet alleen de prijs.</p>
<p class="lvg__end">Einde artikel. Vragen? Bel 010 123 4567.</p>
</div>
</div>
</div>
</div>/* Leesvoortgang in artikel · NedDev · eigen werk. */
.lvg{position:absolute;inset:0;background:#fff;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;text-align:left}
.lvg *,.lvg *::before,.lvg *::after{box-sizing:border-box}
.lvg__scroll{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.lvg__scroll:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.lvg__strip{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;height:36px;padding:0 14px;background:#fff;border-bottom:1px solid #eeebe7}
.lvg__stitle{flex:1;min-width:0;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvg__left{flex:none;font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;color:#5c5a57;font-variant-numeric:tabular-nums}
.lvg__track{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:transparent}
.lvg__fill{display:block;height:100%;background:#F5480F;transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline:scroll()){.lvg__fill{animation:lvg-fill linear both;animation-timeline:scroll(nearest block)}}
@keyframes lvg-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.lvg__art{padding:18px 18px 40px;max-width:60ch}
.lvg__art p{margin:0 0 12px;font-size:13.5px;line-height:1.6;color:#2a2826}
.lvg__art .lvg__kicker{margin:0 0 6px;font:500 10px/1.2 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#B8360A}
.lvg__art .lvg__h1{margin:0 0 8px;font-size:20px;font-weight:700;line-height:1.2;letter-spacing:-.015em;color:#0a0a0a}
.lvg__art .lvg__meta{font:500 11px/1.3 'JetBrains Mono',ui-monospace,monospace;color:#5c5a57;margin-bottom:16px}
.lvg__art .lvg__h2{margin:18px 0 6px;font-size:15px;font-weight:700;color:#0a0a0a}
.lvg__art .lvg__end{margin-top:20px;padding-top:12px;border-top:1px solid #eeebe7;font-size:12.5px;color:#5c5a57}// Leesvoortgang in artikel · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.lvg');if(!w)return;
var sc=w.querySelector('.lvg__scroll'),fill=w.querySelector('.lvg__fill'),left=w.querySelector('.lvg__left');
var css=window.CSS&&CSS.supports&&CSS.supports('animation-timeline:scroll()');w.setAttribute('data-mode',css?'css':'js');
var MIN=6,tick=false;
function upd(){tick=false;var max=sc.scrollHeight-sc.clientHeight,p=max>0?Math.min(1,Math.max(0,sc.scrollTop/max)):0;
if(!css)fill.style.transform='scaleX('+p+')';
var m=Math.ceil(MIN*(1-p));left.textContent=p>=.99?'Uitgelezen':'nog '+m+' min';}
sc.addEventListener('scroll',function(){if(!tick){tick=true;requestAnimationFrame(upd);}},{passive:true});
upd();
}
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 →