Cover krimpt tot vaste header New

A full cover photo with a title shrinks into a slim fixed header as you scroll; the title scales down with it and the shadow only appears at the end. CSS scroll-timeline (animation-timeline on a named scroll()) in Chrome, Edge and Safari 26; in Firefox a small scroll listener sets the same values. For a project story or blog article.

Restauratie · Amsterdam

Herengracht 212

Een rijksmonument uit 1672 kreeg in veertien maanden nieuwe funderingspalen, een hersteld trappenhuis en ramen met monumentenglas.

Oplevering: ma 8 sep 2026
Bouwsom: € 1,24 mln
Vergunning: Omgevingsplan, 11 weken

De gevel bleef staan terwijl we van binnenuit de vloeren stempelden. De buren aan beide kanten hielden tijdens het hele traject een trillingsmeter op hun muur.

Het snijwerk boven de voordeur is door een steenhouwer uit Weesp in de werkplaats hersteld en in juni teruggeplaatst.

Volgend project: pakhuis aan de Brouwersgracht

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.

<!-- Cover krimpt tot vaste header · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="cwh" tabindex="0" role="region" aria-label="Projectverhaal, scrollbaar">
  <div class="cwh__bar">
    <div class="cwh__cover"><img src="https://neddev.com/lab-media/cover-wordt-header-1.webp" alt="" width="1200" height="655"><span class="cwh__shade"></span>
      <div class="cwh__title"><span class="cwh__k">Restauratie · Amsterdam</span><h4 class="cwh__h">Herengracht 212</h4></div>
    </div>
  </div>
  <div class="cwh__body">
    <p class="cwh__lead">Een rijksmonument uit 1672 kreeg in veertien maanden nieuwe funderingspalen, een hersteld trappenhuis en ramen met monumentenglas.</p>
    <dl class="cwh__facts"><div><dt>Oplevering</dt><dd>ma 8 sep 2026</dd></div><div><dt>Bouwsom</dt><dd>€ 1,24 mln</dd></div><div><dt>Vergunning</dt><dd>Omgevingsplan, 11 weken</dd></div></dl>
    <p>De gevel bleef staan terwijl we van binnenuit de vloeren stempelden. De buren aan beide kanten hielden tijdens het hele traject een trillingsmeter op hun muur.</p>
    <p>Het snijwerk boven de voordeur is door een steenhouwer uit Weesp in de werkplaats hersteld en in juni teruggeplaatst.</p>
    <p class="cwh__end">Volgend project: pakhuis aan de Brouwersgracht</p>
  </div>
</div>
</div>

/* Cover krimpt tot vaste header · NedDev · eigen werk. */
.cwh{position:absolute;inset:0;overflow-y:auto;background:#fff;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;container-type:size;scroll-timeline:--cwh y;scrollbar-width:thin;--cwh-min:46px}
.cwh:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.cwh__bar{position:sticky;top:0;height:var(--cwh-min);z-index:2}
.cwh__cover{position:absolute;left:0;right:0;top:0;height:100cqh;overflow:hidden;background:#13293d;color:#fff;--p:0}
.cwh__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cwh__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.05),rgba(10,10,10,.55))}
.cwh__title{position:absolute;left:16px;bottom:14px;right:16px;transform-origin:left bottom}
.cwh__k{display:block;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.cwh__h{margin:0;font:800 clamp(26px,9cqi,44px)/1 'Switzer',sans-serif;letter-spacing:-.035em}
.cwh__body{margin-top:calc(100cqh - var(--cwh-min));padding:18px 16px 20px;font-size:13px;line-height:1.55;color:#2a2622}
.cwh__body p{margin:0 0 12px;max-width:34em}
.cwh__lead{font-size:15px;line-height:1.45;color:#0a0a0a;font-weight:500}
.cwh__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px;padding:10px 0;border-block:1px solid #e6e3de}
.cwh__facts dt{font:500 9.5px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:#5f5a54}
.cwh__facts dd{margin:2px 0 0;font-weight:600;font-size:12px}
.cwh__end{font-weight:600;border-top:1px solid #0a0a0a;padding-top:10px}
/* JS-fallback zet --p (0..1) */
.cwh.is-js .cwh__cover{height:calc(100cqh - (100cqh - var(--cwh-min)) * var(--p));box-shadow:0 6px 14px rgba(0,0,0,calc(max(0, var(--p) - .9) * 3))}
.cwh.is-js .cwh__cover img,.cwh.is-js .cwh__shade{opacity:calc(1 - var(--p) * .9)}
.cwh.is-js .cwh__title{bottom:calc(14px - 3px * var(--p));transform:scale(calc(1 - var(--p) * .55))}
.cwh.is-js .cwh__k{opacity:calc(1 - var(--p) * 2)}
@supports (animation-timeline: scroll()){
  .cwh__cover{animation:cwh-shrink linear both;animation-timeline:--cwh;animation-range:0 calc(100cqh - var(--cwh-min))}
  .cwh__cover img,.cwh__shade{animation:cwh-fade linear both;animation-timeline:--cwh;animation-range:0 calc(100cqh - var(--cwh-min))}
  .cwh__title{animation:cwh-title linear both;animation-timeline:--cwh;animation-range:0 calc(100cqh - var(--cwh-min))}
  .cwh__k{animation:cwh-k linear both;animation-timeline:--cwh;animation-range:0 calc(50cqh - var(--cwh-min))}
}
@keyframes cwh-shrink{0%{height:100cqh;box-shadow:0 0 0 rgba(0,0,0,0)}90%{box-shadow:0 0 0 rgba(0,0,0,0)}100%{height:var(--cwh-min);box-shadow:0 6px 14px rgba(0,0,0,.28)}}
@keyframes cwh-fade{to{opacity:.1}}
@keyframes cwh-title{to{transform:scale(.45);bottom:11px}}
@keyframes cwh-k{to{opacity:0}}

// Cover krimpt tot vaste header · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.cwh')||root;
if(window.CSS&&CSS.supports&&CSS.supports('animation-timeline: scroll()'))return;
root.classList.add('is-js');var cover=root.querySelector('.cwh__cover'),raf=0;
function upd(){raf=0;var range=root.clientHeight-46;var p=Math.min(1,Math.max(0,root.scrollTop/range));cover.style.setProperty('--p',p.toFixed(3));}
root.addEventListener('scroll',function(){if(!raf)raf=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 →