Sticky stappen met telefoon New
Numbered steps on a vertical line with a progress dot on the left, a sticky phone on the right whose screen changes per step (licence plate, time slot, confirmation, iDEAL). Uses position: sticky and a light scroll measurement; the dots are buttons that jump to the step. For "how it works" sections.
01
Vul je kenteken in
We zoeken merk, model en APK-datum er zelf bij.
02
Kies een moment
Vrije plekken van de werkplaats in Zwolle, ook om 7:30.
03
Bevestiging en herinnering
Een dag vooraf een sms, met de prijs al erbij.
04
Klaar? Betaal met iDEAL
Je krijgt een bericht met foto's en betaallink.
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.
<!-- Sticky stappen met telefoon · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ssp"><div class="ssp__sc" tabindex="0" aria-label="Zo werkt afspraak maken bij Autobedrijf Hendriks"><div class="ssp__grid">
<div class="ssp__stappen">
<div class="ssp__lijn" aria-hidden="true"><i></i></div>
<div class="ssp__st is-on"><span class="ssp__n">01</span><h5>Vul je kenteken in</h5><p>We zoeken merk, model en APK-datum er zelf bij.</p></div>
<div class="ssp__st"><span class="ssp__n">02</span><h5>Kies een moment</h5><p>Vrije plekken van de werkplaats in Zwolle, ook om 7:30.</p></div>
<div class="ssp__st"><span class="ssp__n">03</span><h5>Bevestiging en herinnering</h5><p>Een dag vooraf een sms, met de prijs al erbij.</p></div>
<div class="ssp__st"><span class="ssp__n">04</span><h5>Klaar? Betaal met iDEAL</h5><p>Je krijgt een bericht met foto's en betaallink.</p></div>
</div>
<div class="ssp__kol"><div class="ssp__tel" aria-hidden="true"><div class="ssp__scr">
<div class="ssp__v is-on"><p class="ssp__app">Hendriks</p><p class="ssp__lab">Je kenteken</p><p class="ssp__plaat"><span>NL</span>S-487-XG</p><p class="ssp__fijn">Volkswagen Polo · 2019<br>APK verloopt 2 nov</p><span class="ssp__knop">Verder</span></div>
<div class="ssp__v"><p class="ssp__app">Hendriks</p><p class="ssp__lab">Kies een dag</p><p class="ssp__dagen"><span>ma 13</span><span class="is-k">di 14</span><span>wo 15</span></p><p class="ssp__slots"><span class="is-x">7:30</span><span class="is-k">8:00</span><span>9:30</span><span>13:00</span></p><span class="ssp__knop">Bevestig</span></div>
<div class="ssp__v"><p class="ssp__app">Hendriks</p><span class="ssp__ok"></span><p class="ssp__lab">Afspraak staat</p><p class="ssp__fijn"><b>di 14 okt · 8:00</b><br>APK + kleine beurt<br>€ 149,00</p><p class="ssp__fijn">Sms-herinnering ma 13 okt</p></div>
<div class="ssp__v"><p class="ssp__app">Hendriks</p><p class="ssp__lab">Je auto is klaar</p><p class="ssp__fijn">Ophalen tot 18:00<br>Te betalen <b>€ 149,00</b></p><span class="ssp__knop ssp__knop--ideal">Betaal met iDEAL</span></div>
</div></div></div>
</div></div>
<div class="ssp__dots" role="group" aria-label="Ga naar stap"><button type="button" aria-label="Stap 1: kenteken" aria-current="step"></button><button type="button" aria-label="Stap 2: moment kiezen"></button><button type="button" aria-label="Stap 3: bevestiging"></button><button type="button" aria-label="Stap 4: betalen"></button></div></div>
</div>/* Sticky stappen met telefoon · NedDev · eigen werk. */
.ssp{position:absolute;inset:0;background:#fff;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;container-type:size}
.ssp__sc{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.ssp__sc:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.ssp__grid{display:grid;grid-template-columns:1.25fr 1fr;gap:6px;padding:0 30px 0 12px}
.ssp__stappen{position:relative;padding:26cqh 0 34cqh 26px}
.ssp__lijn{position:absolute;left:7px;top:26cqh;bottom:34cqh;width:2px;background:#e6e3de}
.ssp__lijn i{position:absolute;left:0;top:0;width:2px;height:var(--ssp-p,0%);background:#F5480F;transition:height .35s}
.ssp__st{position:relative;min-height:58cqh;opacity:.35;transition:opacity .3s}
.ssp__st.is-on{opacity:1}
.ssp__st::before{content:'';position:absolute;left:-24px;top:3px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid #cfcac2;transition:background .3s,border-color .3s}
.ssp__st.is-on::before{background:#F5480F;border-color:#F5480F}
.ssp__n{font:600 10px 'JetBrains Mono',monospace;color:#b8330a;letter-spacing:.06em}
.ssp__st h5{margin:2px 0 4px;font:700 clamp(13px,4.2cqi,22px)/1.15 'Switzer',sans-serif;letter-spacing:-.01em}
.ssp__st p{margin:0;font-size:clamp(11px,3cqi,14px);line-height:1.45;color:#3d3d3d}
.ssp__kol{position:relative}
.ssp__tel{position:sticky;top:7cqh;height:86cqh;aspect-ratio:9/18.5;margin:0 auto;border-radius:clamp(14px,4.5cqi,30px);background:#0a0a0a;padding:clamp(4px,1.1cqi,7px);box-sizing:border-box}
.ssp__scr{position:relative;height:100%;border-radius:clamp(10px,3.6cqi,24px);background:#f4f3f1;overflow:hidden}
.ssp__v{position:absolute;inset:0;padding:14% 9% 9%;display:flex;flex-direction:column;gap:6%;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;font-size:clamp(7px,2.1cqi,12px)}
.ssp__v.is-on{opacity:1;transform:none}
.ssp__v p{margin:0}
.ssp__app{font-weight:800;letter-spacing:-.01em}
.ssp__lab{font:600 .95em/1.2 'Switzer',sans-serif;color:#555}
.ssp__plaat{display:flex;align-items:stretch;background:#f7c600;border:1px solid #0a0a0a;border-radius:3px;font:700 1.25em/1.6 'JetBrains Mono',monospace;color:#0a0a0a;overflow:hidden}
.ssp__plaat span{background:#1d4fb8;color:#fff;font-size:.55em;padding:0 3px;display:flex;align-items:flex-end}
.ssp__plaat{gap:4px;padding-right:4px}
.ssp__fijn{line-height:1.45;color:#2b2b2b}
.ssp__knop{margin-top:auto;display:block;text-align:center;background:#0a0a0a;color:#fff;border-radius:999px;padding:6% 0;font-weight:700}
.ssp__knop--ideal{background:#cc0066}
.ssp__dagen,.ssp__slots{display:flex;flex-wrap:wrap;gap:4px}
.ssp__dagen span,.ssp__slots span{border:1px solid #cfcac2;border-radius:3px;padding:2px 4px;background:#fff;font-variant-numeric:tabular-nums}
.ssp__dagen .is-k,.ssp__slots .is-k{background:#F5480F;border-color:#F5480F;color:#fff}
.ssp__slots .is-x{text-decoration:line-through;color:#999}
.ssp__ok{width:26%;aspect-ratio:1;border-radius:50%;background:#1f8a4c;position:relative}
.ssp__ok::after{content:'';position:absolute;left:34%;top:24%;width:24%;height:40%;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ssp__dots{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:7px}
.ssp__dots button{width:12px;height:12px;padding:0;border-radius:50%;border:1.5px solid #0a0a0a;background:#fff;cursor:pointer;transition:background .18s}
.ssp__dots button:hover{background:#ffd9cb}
.ssp__dots button[aria-current="step"]{background:#0a0a0a}
.ssp__dots button:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
@media (prefers-reduced-motion: reduce){.ssp__v,.ssp__st,.ssp__lijn i{transition:none}}// Sticky stappen met telefoon · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.ssp')||root;function lab_drift(sc,host,speed){if(matchMedia('(prefers-reduced-motion: reduce)').matches)return;var on=true,t0=0;function stop(){on=false;}
['wheel','touchstart','pointerdown','keydown','focusin'].forEach(function(ev){host.addEventListener(ev,stop,{passive:true});});
function f(now){if(!on)return;if(!t0)t0=now;var max=sc.scrollHeight-sc.clientHeight,ph=(now-t0)/1000*speed;sc.scrollTop=max*(.5-.5*Math.cos(ph));requestAnimationFrame(f);}
setTimeout(function(){if(on)requestAnimationFrame(f);},900);}
var sc=root.querySelector('.ssp__sc'),sts=[].slice.call(root.querySelectorAll('.ssp__st')),vs=[].slice.call(root.querySelectorAll('.ssp__v')),dots=[].slice.call(root.querySelectorAll('.ssp__dots button')),lijn=root.querySelector('.ssp__lijn');
var rm=matchMedia('(prefers-reduced-motion: reduce)').matches,cur=-1;
function set(i){if(i===cur)return;cur=i;sts.forEach(function(s,k){s.classList.toggle('is-on',k===i);});vs.forEach(function(v,k){v.classList.toggle('is-on',k===i);});
dots.forEach(function(d,k){if(k===i)d.setAttribute('aria-current','step');else d.removeAttribute('aria-current');});
lijn.style.setProperty('--ssp-p',(sts.length>1?i/(sts.length-1)*100:0).toFixed(1)+'%');}
function upd(){var mid=sc.scrollTop+sc.clientHeight*.45,best=0,bd=1e9;sts.forEach(function(s,k){var d=Math.abs(s.offsetTop+20-mid);if(d<bd){bd=d;best=k;}});set(best);}
var tk=false;sc.addEventListener('scroll',function(){if(!tk){tk=true;requestAnimationFrame(function(){tk=false;upd();});}},{passive:true});
dots.forEach(function(d,k){d.addEventListener('click',function(){var y=sts[k].offsetTop+20-sc.clientHeight*.45;sc.scrollTo({top:y,behavior:rm?'auto':'smooth'});});});
set(0);upd();lab_drift(sc,root,.26);
}
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 →