Achtergrond kleurt mee per smaak New

Five ice cream flavours stacked; as you scroll the background blends from pistachio green via strawberry and mango to chocolate, with buttons on the right to jump to a flavour. Pure CSS with animation-timeline: scroll() on its own scroll box; a small script takes over without support. For an ice cream parlour product page, a collection page or a seasonal menu.

Pistache

Sicilaanse pistache, licht gezouten, met stukjes noot.

€ 2,20 per bol

Aardbei

Van een kwekerij in Made, alleen in juni en juli.

€ 2,20 per bol

Mango

Alphonso-mango, zonder zuivel en dus vegan.

€ 2,40 per bol

Stracciatella

Room uit Twente met flinters pure chocolade.

€ 2,20 per bol

Chocolade

70 procent cacao uit Ghana, gedraaid in Zwolle.

€ 2,40 per bol

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.

<!-- Achtergrond kleurt mee per smaak · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="ks">
  <div class="ks__vak" tabindex="0" role="region" aria-label="Smaken van deze week. Scroll in dit vak, de achtergrond kleurt mee.">
    <div class="ks__bg" aria-hidden="true"></div>
    <div class="ks__s"><div class="ks__ijs" style="--b:#93b25c" aria-hidden="true"></div><div class="ks__t"><h3 class="ks__naam">Pistache</h3><p class="ks__p">Sicilaanse pistache, licht gezouten, met stukjes noot.</p><p class="ks__prijs">€ 2,20 per bol</p></div></div>
    <div class="ks__s"><div class="ks__ijs" style="--b:#e0535d" aria-hidden="true"></div><div class="ks__t"><h3 class="ks__naam">Aardbei</h3><p class="ks__p">Van een kwekerij in Made, alleen in juni en juli.</p><p class="ks__prijs">€ 2,20 per bol</p></div></div>
    <div class="ks__s"><div class="ks__ijs" style="--b:#f5a20f" aria-hidden="true"></div><div class="ks__t"><h3 class="ks__naam">Mango</h3><p class="ks__p">Alphonso-mango, zonder zuivel en dus vegan.</p><p class="ks__prijs">€ 2,40 per bol</p></div></div>
    <div class="ks__s"><div class="ks__ijs ks__ijs--strac" style="--b:#fffdf8" aria-hidden="true"></div><div class="ks__t"><h3 class="ks__naam">Stracciatella</h3><p class="ks__p">Room uit Twente met flinters pure chocolade.</p><p class="ks__prijs">€ 2,20 per bol</p></div></div>
    <div class="ks__s ks__s--donker"><div class="ks__ijs" style="--b:#24130c" aria-hidden="true"></div><div class="ks__t"><h3 class="ks__naam">Chocolade</h3><p class="ks__p">70 procent cacao uit Ghana, gedraaid in Zwolle.</p><p class="ks__prijs">€ 2,40 per bol</p></div></div>
  </div>
  <div class="ks__nav" role="group" aria-label="Spring naar een smaak">
    <button type="button" class="ks__knop" style="--c:#93b25c" aria-label="Naar Pistache" aria-current="true"></button>
    <button type="button" class="ks__knop" style="--c:#e0535d" aria-label="Naar Aardbei"></button>
    <button type="button" class="ks__knop" style="--c:#f5a20f" aria-label="Naar Mango"></button>
    <button type="button" class="ks__knop" style="--c:#fffdf8" aria-label="Naar Stracciatella"></button>
    <button type="button" class="ks__knop" style="--c:#24130c" aria-label="Naar Chocolade"></button>
  </div>
  <p class="ks__hint" aria-hidden="true">Scroll door de smaken</p>
</div>
</div>

/* Achtergrond kleurt mee per smaak · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.ks{position:absolute;inset:0;container-type:size;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;background:#d4e3b8}
.ks__vak{position:absolute;inset:0;overflow-y:auto;scrollbar-width:none;scroll-snap-type:y proximity;scroll-timeline:--ks y}
.ks__vak::-webkit-scrollbar{display:none}
.ks__vak:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.ks__bg{position:sticky;top:0;height:100cqh;margin-bottom:-100cqh;background:#d4e3b8}
@supports (animation-timeline: scroll()){.ks__bg{animation:ks-kleur linear both;animation-timeline:--ks}}
@keyframes ks-kleur{0%,8%{background:#d4e3b8}17%,33%{background:#f7c9c6}42%,58%{background:#ffd77a}67%,83%{background:#f4f3f1}92%,100%{background:#3b241a}}
.ks__s{position:relative;height:100cqh;display:flex;align-items:center;gap:6cqw;padding:0 60px 0 8cqw;box-sizing:border-box;scroll-snap-align:start}
.ks__s--donker{color:#fff}
.ks__ijs{position:relative;flex:none;width:30cqh;height:58cqh}
.ks__ijs::before{content:'';position:absolute;left:0;top:0;width:30cqh;height:28cqh;border-radius:50% 50% 44% 44%;background:var(--b);box-shadow:inset -6px -8px 0 rgba(0,0,0,.1)}
.ks__ijs::after{content:'';position:absolute;left:3cqh;top:24cqh;width:24cqh;height:34cqh;background:repeating-linear-gradient(45deg,#d9a46a 0 5px,#c98f55 5px 7px);clip-path:polygon(0 0,100% 0,50% 100%)}
.ks__ijs--strac::before{background:radial-gradient(circle,#2b170f 1.4px,transparent 1.6px) 0 0/9px 8px,var(--b)}
.ks__s--donker .ks__ijs::before{box-shadow:inset -6px -8px 0 rgba(255,255,255,.08),0 0 0 2px rgba(255,255,255,.25)}
.ks__t{min-width:0}
.ks__naam{font-size:clamp(22px,8cqw,34px);font-weight:700;line-height:1.05;margin:0 0 6px}
.ks__p{font-size:clamp(12px,3.4cqw,14px);line-height:1.4;margin:0 0 8px;max-width:28ch}
.ks__prijs{font-size:clamp(13px,3.6cqw,15px);font-weight:600;margin:0}
.ks__nav{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px}
.ks__knop{width:24px;height:24px;padding:0;border:2px solid #0a0a0a;border-radius:4px;background:var(--c);cursor:pointer}
.ks__knop[aria-current="true"]{outline:2px solid #F5480F;outline-offset:2px}
.ks__knop:focus-visible{outline:3px solid #0a0a0a;outline-offset:2px}
.ks__hint{position:absolute;left:10px;bottom:8px;margin:0;font-size:12px;background:#fff;padding:3px 8px;border-radius:4px;pointer-events:none;transition:opacity .3s}
.ks.is-weg .ks__hint{opacity:0}

// Achtergrond kleurt mee per smaak · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
const w = root.querySelector('.ks'); if (!w) return;
    const vak = w.querySelector('.ks__vak'), bg = w.querySelector('.ks__bg'), knoppen = [...w.querySelectorAll('.ks__knop')];
    const rm = matchMedia('(prefers-reduced-motion: reduce)').matches;
    const css = window.CSS && CSS.supports && CSS.supports('animation-timeline: scroll()');
    const kl = ['#d4e3b8', '#f7c9c6', '#ffd77a', '#f4f3f1', '#3b241a'];
    const hex = h => [1, 3, 5].map(i => parseInt(h.slice(i, i + 2), 16));
    const mix = (a, b, t) => { const x = hex(a), y = hex(b); return 'rgb(' + x.map((v, i) => Math.round(v + (y[i] - v) * t)).join(',') + ')'; };
    let raf = 0, actief = 0;
    function teken() {
      raf = 0; const h = vak.clientHeight || 1, z = vak.scrollTop / h;
      const i = Math.max(0, Math.min(4, Math.round(z)));
      if (i !== actief) { knoppen[actief].removeAttribute('aria-current'); knoppen[i].setAttribute('aria-current', 'true'); actief = i; }
      if (!css) {
        const k = Math.min(3, Math.floor(z)), f = Math.max(0, Math.min(1, (z - k - .32) / .36));
        bg.style.background = mix(kl[k], kl[k + 1], f);
      }
      w.classList.toggle('is-weg', vak.scrollTop > 8);
    }
    knoppen.forEach((b, i) => b.addEventListener('click', () => vak.scrollTo({ top: i * vak.clientHeight, behavior: rm ? 'auto' : 'smooth' })));
    vak.addEventListener('scroll', () => { if (!raf) raf = requestAnimationFrame(teken); }, { passive: true });
    teken();
}
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 →