Statistiek-band

Wide beton band with four large animating counters and monospace labels.

/ in cijfers

0Live projecten

0Jaar ervaring (team)

0Uptime gemiddeld

0Werkdagen tot eerste design

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.

<!-- Statistiek-band · NedDev · eigen werk. -->
<div class="jouw-container">
<section class="stb">
  <div class="stb__inner">
    <span class="stb__eyebrow">/ in cijfers</span>
    <div class="stb__grid">
      <div class="stb__item"><span class="stb__v" data-to="40" data-suf="+">0</span><span class="stb__l">Live projecten</span></div>
      <div class="stb__item"><span class="stb__v" data-to="12" data-suf="">0</span><span class="stb__l">Jaar ervaring (team)</span></div>
      <div class="stb__item"><span class="stb__v" data-to="99.9" data-suf="%" data-dec="1">0</span><span class="stb__l">Uptime gemiddeld</span></div>
      <div class="stb__item"><span class="stb__v" data-to="3" data-suf="" data-pre="< ">0</span><span class="stb__l">Werkdagen tot eerste design</span></div>
    </div>
  </div>
</section>
</div>

/* Statistiek-band · NedDev · eigen werk. */
.stb{width:100%;box-sizing:border-box;background:#f4f3f1;color:#0a0a0a;border-top:1px solid rgba(10,10,10,.12);border-bottom:1px solid rgba(10,10,10,.12);display:flex;align-items:center}
.stb__inner{max-width:900px;margin:0 auto;padding:50px 28px;width:100%;box-sizing:border-box}
.stb__eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:#F5480F;display:block;margin-bottom:30px}
.stb__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(10,10,10,.12)}
.stb__item{background:#f4f3f1;padding:8px 18px 8px 0;display:flex;flex-direction:column}
.stb__item:not(:first-child){padding-left:24px}
.stb__v{font-family:'Boldonse',sans-serif;font-weight:400;font-size:clamp(38px,6vw,68px);line-height:.9;letter-spacing:-.03em}
.stb__l{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;color:#777;margin-top:12px;max-width:18ch}
@media(max-width:680px){.stb__grid{grid-template-columns:1fr 1fr;gap:1px}.stb__item{padding:16px}}

// Statistiek-band · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.stb')||root;
var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
var vs=[].slice.call(root.querySelectorAll('.stb__v'));
function setv(el,n){var d=+el.dataset.dec||0;el.textContent=(el.dataset.pre||'')+n.toFixed(d)+(el.dataset.suf||'');}
function run(){vs.forEach(function(el){var to=+el.dataset.to;if(reduce){setv(el,to);return;}var t0=null;function s(ts){if(!t0)t0=ts;var p=Math.min((ts-t0)/1200,1);setv(el,(1-Math.pow(1-p,3))*to);if(p<1)requestAnimationFrame(s);}requestAnimationFrame(s);});}
var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){run();io.disconnect();}});},{threshold:.4});io.observe(root);
}
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 →