Leesvoortgang in artikel Nieuw
Dunne voortgangsbalk bovenin een artikel, aangestuurd door CSS animation-timeline: scroll() zonder enige JS voor de balk, met een kleine JS-fallback voor browsers zonder scroll-driven animations (zoals Firefox). De balk zit in een sticky strook met de titel en hoeveel minuten je nog leest. Draait hier in een eigen scrollvlak; op een echte pagina gebruik je 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.
Zo gebruik je het
- Plak de HTML op de plek waar het onderdeel moet komen.
- Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
- Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.
<!-- 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'));Meer uit scroll-effecten
Iets gezien dat je mooi vindt?
Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.
Neem contact op →