Boom door de seizoenen Nieuw

Een getekende boom die per seizoen verandert: bloesem in de lente, een volle kruin met zon in de zomer, vallend blad in de herfst en sneeuw op kale takken in de winter, met per seizoen het werk dat de hovenier dan doet. Opent op het seizoen van vandaag. Tabs met pijltjestoetsen; zonder beweging blijft alles stil staan. Voor de diensten- of onderhoudspagina van een hovenier, kwekerij of tuincentrum.

Wat we in uw tuin doen, per seizoen

September tot november: blad ruimen, bollen planten voor het voorjaar en de vijver afdekken.

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.

<!-- Boom door de seizoenen · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="r7sb" data-s="herfst">
<div class="r7sb__beeld">
<svg class="r7sb__svg" viewBox="0 0 160 150" aria-hidden="true" focusable="false">
<rect class="r7sb__lucht" x="0" y="0" width="160" height="150" rx="6"/>
<g class="r7sb__zon"><circle cx="128" cy="30" r="11"/><path d="M128 10v-5M128 55v-5M108 30h-5M153 30h-5M114 16l-3-3M145 47l-3-3M142 16l3-3M111 47l3-3"/></g>
<g class="r7sb__kruin"><circle cx="80" cy="62" r="34"/><circle cx="56" cy="74" r="22"/><circle cx="104" cy="74" r="22"/><circle cx="80" cy="44" r="22"/></g>
<path class="r7sb__stam" d="M80 134V92M80 104L60 80M80 98L101 76M80 92V60M66 88L52 76M94 84L108 68M80 72L70 56M80 70L92 54"/>
<g class="r7sb__bloesem"><circle cx="62" cy="58" r="3.2"/><circle cx="92" cy="48" r="3.2"/><circle cx="104" cy="70" r="3.2"/><circle cx="72" cy="80" r="3.2"/><circle cx="50" cy="78" r="3.2"/><circle cx="84" cy="34" r="3.2"/><circle cx="96" cy="86" r="3.2"/></g>
<g class="r7sb__blad"><path style="--x:-8px;--d:0s" d="M60 70c3-3 7-1 6 3c-3 2-6 1-6-3z"/><path style="--x:10px;--d:1.1s" d="M96 64c3-3 7-1 6 3c-3 2-6 1-6-3z"/><path style="--x:-14px;--d:2.2s" d="M80 50c3-3 7-1 6 3c-3 2-6 1-6-3z"/><path style="--x:6px;--d:.6s" d="M106 80c3-3 7-1 6 3c-3 2-6 1-6-3z"/></g>
<g class="r7sb__sneeuw"><circle style="--d:0s" cx="22" cy="0" r="1.8"/><circle style="--d:.9s" cx="44" cy="0" r="1.5"/><circle style="--d:1.7s" cx="66" cy="0" r="1.8"/><circle style="--d:.4s" cx="98" cy="0" r="1.5"/><circle style="--d:1.3s" cx="120" cy="0" r="1.8"/><circle style="--d:2.1s" cx="142" cy="0" r="1.5"/></g>
<path class="r7sb__grond" d="M0 134H160"/>
<path class="r7sb__dek" d="M8 134C30 128 50 131 80 129C110 127 132 131 152 134Z"/>
</svg>
</div>
<div class="r7sb__info">
<p class="r7sb__h">Wat we in uw tuin doen, per seizoen</p>
<div class="r7sb__tabs" role="tablist" aria-label="Seizoen">
<button class="r7sb__tab" role="tab" type="button" id="r7sb-t-lente" aria-controls="r7sb-p" aria-selected="false" tabindex="-1" data-s="lente">Lente</button>
<button class="r7sb__tab" role="tab" type="button" id="r7sb-t-zomer" aria-controls="r7sb-p" aria-selected="false" tabindex="-1" data-s="zomer">Zomer</button>
<button class="r7sb__tab" role="tab" type="button" id="r7sb-t-herfst" aria-controls="r7sb-p" aria-selected="true" tabindex="0" data-s="herfst">Herfst</button>
<button class="r7sb__tab" role="tab" type="button" id="r7sb-t-winter" aria-controls="r7sb-p" aria-selected="false" tabindex="-1" data-s="winter">Winter</button>
</div>
<p class="r7sb__p" id="r7sb-p" role="tabpanel" aria-labelledby="r7sb-t-herfst">September tot november: blad ruimen, bollen planten voor het voorjaar en de vijver afdekken.</p>
</div>
</div>
</div>

/* Boom door de seizoenen · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.r7sb{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:16px;padding:14px 18px;background:#fff;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;text-align:left}
.r7sb *,.r7sb *::before,.r7sb *::after{box-sizing:border-box}
.r7sb__beeld{min-width:0}
.r7sb__svg{display:block;width:100%;height:auto;max-height:86cqh}
.r7sb__lucht{fill:#f4f3f1;transition:fill .6s}
.r7sb__stam{fill:none;stroke:#0a0a0a;stroke-width:3;stroke-linecap:round;transition:stroke .6s}
.r7sb__grond{fill:none;stroke:#0a0a0a;stroke-width:1.5;transition:stroke .6s}
.r7sb__kruin{transform-origin:80px 90px;transition:transform .6s cubic-bezier(.3,1.3,.5,1),fill .6s,opacity .4s}
.r7sb__kruin circle{fill:inherit}
.r7sb__zon{fill:#F5480F;stroke:#F5480F;stroke-width:2;stroke-linecap:round;transform-origin:128px 30px;transform:scale(0);transition:transform .5s}
.r7sb__bloesem circle{fill:#fff;stroke:#F5480F;stroke-width:1.6;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .35s}
.r7sb__blad path{fill:#F5480F;opacity:0}
.r7sb__sneeuw circle{fill:#fff;opacity:0}
.r7sb__dek{fill:#fff;opacity:0;transition:opacity .6s}
.r7sb[data-s="lente"] .r7sb__kruin{fill:#7f9f6a;transform:scale(.8)}
.r7sb[data-s="lente"] .r7sb__bloesem circle{transform:scale(1)}
.r7sb[data-s="lente"] .r7sb__bloesem circle:nth-child(2n){transition-delay:.1s}
.r7sb[data-s="lente"] .r7sb__bloesem circle:nth-child(3n){transition-delay:.2s}
.r7sb[data-s="zomer"] .r7sb__kruin{fill:#3f6b45;transform:scale(1)}
.r7sb[data-s="zomer"] .r7sb__zon{transform:scale(1)}
.r7sb[data-s="zomer"] .r7sb__lucht{fill:#fbe7dc}
.r7sb[data-s="herfst"] .r7sb__kruin{fill:#e0743f;transform:scale(.88)}
.r7sb[data-s="herfst"] .r7sb__blad path{animation:r7sb-val 3.3s ease-in var(--d) infinite}
.r7sb[data-s="winter"] .r7sb__kruin{transform:scale(0);opacity:0}
.r7sb[data-s="winter"] .r7sb__lucht{fill:#0a0a0a}
.r7sb[data-s="winter"] .r7sb__stam,.r7sb[data-s="winter"] .r7sb__grond{stroke:#f4f3f1}
.r7sb[data-s="winter"] .r7sb__dek{opacity:1}
.r7sb[data-s="winter"] .r7sb__sneeuw circle{animation:r7sb-sneeuw 4s linear var(--d) infinite}
@keyframes r7sb-val{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(var(--x),62px) rotate(200deg)}}
@keyframes r7sb-sneeuw{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translate(6px,132px)}}
.r7sb__info{display:flex;flex-direction:column;gap:10px;min-width:0}
.r7sb__h{margin:0;font:600 clamp(15px,4.6cqi,19px)/1.2 'Switzer',sans-serif;letter-spacing:-.01em;text-wrap:balance}
.r7sb__tabs{display:flex;flex-wrap:wrap;gap:4px}
.r7sb__tab{min-height:30px;padding:5px 9px;border:1px solid rgba(10,10,10,.2);border-radius:4px;background:#fff;color:#0a0a0a;font:500 13px/1 'Switzer',sans-serif;cursor:pointer;transition:background-color .16s,border-color .16s}
.r7sb__tab:hover{border-color:#0a0a0a}
.r7sb__tab[aria-selected="true"]{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.r7sb__tab:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.r7sb__p{margin:0;font:400 13px/1.45 'Switzer',sans-serif;color:#3a3835;min-height:5.8em}
@container (max-width:360px){.r7sb__tab{padding:5px 7px}.r7sb__p{font-size:12px}}
@media (prefers-reduced-motion:reduce){.r7sb *{transition:none!important}.r7sb[data-s="herfst"] .r7sb__blad path{animation:none;opacity:1;transform:translate(var(--x),60px)}.r7sb[data-s="winter"] .r7sb__sneeuw circle{animation:none;opacity:1;transform:translateY(40px)}}

// Boom door de seizoenen · © 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){
var w=root.querySelector('.r7sb');if(!w)return;
var tabs=[].slice.call(w.querySelectorAll('.r7sb__tab')),p=w.querySelector('.r7sb__p');
var tekst={lente:'Maart tot mei: hagen snoeien, het gazon verticuteren en nieuwe borders planten.',zomer:'Juni tot augustus: maaien, water geven bij droogte en de buxus in vorm knippen.',herfst:'September tot november: blad ruimen, bollen planten voor het voorjaar en de vijver afdekken.',winter:'December tot februari: bomen snoeien in hun rust en de tuin winterklaar maken.'};
function kies(s,focus){
  w.setAttribute('data-s',s);
  tabs.forEach(function(t){var on=t.getAttribute('data-s')===s;t.setAttribute('aria-selected',on?'true':'false');t.tabIndex=on?0:-1;if(on){p.setAttribute('aria-labelledby',t.id);if(focus)t.focus();}});
  p.textContent=tekst[s];
}
tabs.forEach(function(t,i){
  t.addEventListener('click',function(){kies(t.getAttribute('data-s'));});
  t.addEventListener('keydown',function(e){var n=null;if(e.key==='ArrowRight')n=(i+1)%4;else if(e.key==='ArrowLeft')n=(i+3)%4;else if(e.key==='Home')n=0;else if(e.key==='End')n=3;if(n!==null){e.preventDefault();kies(tabs[n].getAttribute('data-s'),true);}});
});
var m=new Date().getMonth();kies(m<2||m===11?'winter':m<5?'lente':m<8?'zomer':'herfst');
}
init(document.querySelector('.jouw-container'));

Meer uit componenten

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 →