Familiebedrijf-tijdlijn horizontaal New

Horizontally scrollable timeline of years with milestones, a progress bar and arrow buttons. For family businesses showing their history.

Installatiebedrijf Hoekstra · Leeuwarden

Sinds 1987 in Friesland.
Twee generaties, één busje erbij per keer.

1987Jan begint voor zichzelf
Met één Volkswagen-bus en een gereedschapskist vanuit de schuur aan de Wiarda.
1994Eerste werkplaats
Een loods aan de Snekertrekweg. Mieke doet vanaf dan de administratie.
2001Pieter komt erbij
Na zijn opleiding in Drachten. Het team groeit naar zes monteurs.
2008Erkend leerbedrijf
Sindsdien leiden we elk jaar twee tot drie leerlingen op. Vier werken er nu nog.
2013Eerste warmtepomp
Bij een boerderij in Stiens. Toen nog een uitzondering, nu de helft van ons werk.
2019Pieter en Marije nemen over
Jan blijft op maandag langskomen voor koffie en commentaar. 24 mensen in dienst.
2023Nieuw pand op De Hemrik
Met eigen opleidingsruimte en een magazijn waar we de meeste onderdelen op voorraad hebben.
20261.000e warmtepomp
Geplaatst in Grou in maart. Op naar de volgende generatie.

How to use it

Paste the HTML where the page sections 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.

<!-- Familiebedrijf-tijdlijn horizontaal · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="abt">
  <div class="abt__in">
    <div class="abt__head">
      <div><span class="abt__eye">Installatiebedrijf Hoekstra · Leeuwarden</span>
      <h2 class="abt__h">Sinds 1987 in Friesland.<br>Twee generaties, één busje erbij per keer.</h2></div>
      <div class="abt__nav"><button type="button" class="abt__arr" data-d="-1" aria-label="Vorige mijlpalen"><svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7" fill="none" stroke="currentColor" stroke-width="2"/></svg></button><button type="button" class="abt__arr" data-d="1" aria-label="Volgende mijlpalen"><svg viewBox="0 0 24 24"><path d="M9 5l7 7-7 7" fill="none" stroke="currentColor" stroke-width="2"/></svg></button></div>
    </div>
    <div class="abt__track" tabindex="0" aria-label="Tijdlijn, scroll horizontaal">
      <ol class="abt__list">
        <li class="abt__m"><span class="abt__y">1987</span><i></i><b>Jan begint voor zichzelf</b><p>Met één Volkswagen-bus en een gereedschapskist vanuit de schuur aan de Wiarda.</p></li>
        <li class="abt__m"><span class="abt__y">1994</span><i></i><b>Eerste werkplaats</b><p>Een loods aan de Snekertrekweg. Mieke doet vanaf dan de administratie.</p></li>
        <li class="abt__m"><span class="abt__y">2001</span><i></i><b>Pieter komt erbij</b><p>Na zijn opleiding in Drachten. Het team groeit naar zes monteurs.</p></li>
        <li class="abt__m"><span class="abt__y">2008</span><i></i><b>Erkend leerbedrijf</b><p>Sindsdien leiden we elk jaar twee tot drie leerlingen op. Vier werken er nu nog.</p></li>
        <li class="abt__m abt__m--hi"><span class="abt__y">2013</span><i></i><b>Eerste warmtepomp</b><p>Bij een boerderij in Stiens. Toen nog een uitzondering, nu de helft van ons werk.</p></li>
        <li class="abt__m"><span class="abt__y">2019</span><i></i><b>Pieter en Marije nemen over</b><p>Jan blijft op maandag langskomen voor koffie en commentaar. 24 mensen in dienst.</p></li>
        <li class="abt__m"><span class="abt__y">2023</span><i></i><b>Nieuw pand op De Hemrik</b><p>Met eigen opleidingsruimte en een magazijn waar we de meeste onderdelen op voorraad hebben.</p></li>
        <li class="abt__m abt__m--now"><span class="abt__y">2026</span><i></i><b>1.000e warmtepomp</b><p>Geplaatst in Grou in maart. Op naar de volgende generatie.</p></li>
      </ol>
    </div>
    <div class="abt__bar"><span></span></div>
  </div>
</div>
</div>

/* Familiebedrijf-tijdlijn horizontaal · NedDev · eigen werk. */
.abt{background:#f3efe8;color:#1f2a33;font-family:'Switzer',sans-serif;box-sizing:border-box}
.abt *{box-sizing:border-box}
.abt__in{max-width:1180px;margin:0 auto;padding:44px 32px 40px}
.abt__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:30px}
.abt__eye{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#b0612e}
.abt__h{font-size:clamp(24px,3vw,36px);line-height:1.12;letter-spacing:-.02em;font-weight:700;margin:10px 0 0}
.abt__nav{display:flex;gap:8px;flex:none}
.abt__arr{width:44px;height:44px;border-radius:50%;border:1px solid #1f2a33;background:transparent;color:#1f2a33;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,opacity .2s}
.abt__arr svg{width:18px;height:18px}
.abt__arr:hover{background:#1f2a33;color:#f3efe8}
.abt__arr:disabled{opacity:.3;cursor:default;background:transparent;color:#1f2a33}
.abt__arr:focus-visible,.abt__track:focus-visible{outline:2px solid #b0612e;outline-offset:3px}
.abt__track{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:6px}
.abt__track::-webkit-scrollbar{display:none}
.abt__list{list-style:none;margin:0;padding:0;display:flex;position:relative;width:max-content}
.abt__list::before{content:'';position:absolute;left:0;right:0;top:62px;height:2px;background:#cdbfa9}
.abt__m{width:250px;flex:none;padding-right:28px;scroll-snap-align:start;position:relative}
.abt__y{display:block;font-size:46px;font-weight:800;letter-spacing:-.04em;line-height:1;color:#1f2a33;height:48px}
.abt__m i{display:block;width:14px;height:14px;border-radius:50%;background:#f3efe8;border:2px solid #b0612e;margin:8px 0 16px;position:relative;z-index:1}
.abt__m--hi i,.abt__m--now i{background:#b0612e}
.abt__m--now .abt__y{color:#b0612e}
.abt__m b{display:block;font-size:16px;margin-bottom:6px}
.abt__m p{margin:0;font-size:14px;line-height:1.5;color:#55606a}
.abt__bar{height:3px;background:#e2d9cb;margin-top:24px;border-radius:2px;overflow:hidden}
.abt__bar span{display:block;height:100%;width:0;background:#b0612e;transition:width .15s linear}
@media(max-width:640px){.abt__in{padding:30px 16px 30px}.abt__head{flex-direction:column;align-items:flex-start}.abt__m{width:220px;padding-right:22px}.abt__y{font-size:38px;height:40px}.abt__list::before{top:54px}}
@media(prefers-reduced-motion:reduce){.abt__track{scroll-behavior:auto}}

// Familiebedrijf-tijdlijn horizontaal · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.abt');if(!w)return;
var tr=w.querySelector('.abt__track'),bar=w.querySelector('.abt__bar span'),btns=w.querySelectorAll('.abt__arr');
function upd(){var max=tr.scrollWidth-tr.clientWidth;var p=max>0?tr.scrollLeft/max:1;bar.style.width=(Math.max(p,0.04)*100)+'%';btns[0].disabled=tr.scrollLeft<4;btns[1].disabled=tr.scrollLeft>max-4;}
btns.forEach(function(b){b.addEventListener('click',function(){var step=tr.querySelector('.abt__m').offsetWidth*2;tr.scrollBy({left:step*+b.getAttribute('data-d'),behavior:matchMedia('(prefers-reduced-motion: reduce)').matches?'auto':'smooth'});});});
tr.addEventListener('scroll',upd,{passive:true});
tr.addEventListener('keydown',function(e){if(e.key==='ArrowRight'){tr.scrollBy({left:250});e.preventDefault();}if(e.key==='ArrowLeft'){tr.scrollBy({left:-250});e.preventDefault();}});
var down=false,sx=0,sl=0;
tr.addEventListener('pointerdown',function(e){if(e.pointerType!=='mouse')return;down=true;sx=e.clientX;sl=tr.scrollLeft;tr.style.scrollSnapType='none';tr.style.scrollBehavior='auto';tr.style.cursor='grabbing';});
window.addEventListener('pointermove',function(e){if(down)tr.scrollLeft=sl-(e.clientX-sx);});
window.addEventListener('pointerup',function(){if(!down)return;down=false;tr.style.scrollSnapType='';tr.style.scrollBehavior='';tr.style.cursor='';});
upd();
}
init(document.querySelector('.jouw-container'));

More page sections

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 →