Rotating on Scroll New
Cards tilt upright in 3D as they reach the middle of the view. For process steps or services.
01KennismakingGratis gesprek op locatie, binnen 5 werkdagen
02OntwerpTwee schetsvarianten met prijsindicatie
03VergunningWij regelen de aanvraag bij de gemeente
04UitvoeringVaste ploeg, wekelijkse update per mail
05OpleveringOpleverrapport en 5 jaar garantie
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.
<!-- Rotating on Scroll · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="ros"><div class="ros__scroll"><div class="ros__in">
<div class="ros__card"><span>01</span><b>Kennismaking</b><em>Gratis gesprek op locatie, binnen 5 werkdagen</em></div>
<div class="ros__card ros__card--o"><span>02</span><b>Ontwerp</b><em>Twee schetsvarianten met prijsindicatie</em></div>
<div class="ros__card ros__card--k"><span>03</span><b>Vergunning</b><em>Wij regelen de aanvraag bij de gemeente</em></div>
<div class="ros__card"><span>04</span><b>Uitvoering</b><em>Vaste ploeg, wekelijkse update per mail</em></div>
<div class="ros__card ros__card--o"><span>05</span><b>Oplevering</b><em>Opleverrapport en 5 jaar garantie</em></div>
</div></div><span class="ros__hint">scroll ↓</span></div>
</div>/* Rotating on Scroll · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.ros{position:absolute;inset:0;background:#f4f3f1;font-family:'Switzer',system-ui,sans-serif;overflow:hidden}
.ros__scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;perspective:700px}
.ros__scroll::-webkit-scrollbar{display:none}
.ros__in{padding:22% 0 40%;display:flex;flex-direction:column;align-items:center;gap:14px}
.ros__card{width:min(78%,300px);padding:14px 16px;border-radius:4px;background:#fff;color:#0a0a0a;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline;transform-origin:50% 100%;box-shadow:0 1px 0 rgba(10,10,10,.08)}
.ros__card span{grid-row:span 2;font:500 11px 'JetBrains Mono',monospace;color:#F5480F}
.ros__card b{font:800 15px/1.2 'Boldonse','Switzer',system-ui,sans-serif;font-synthesis:none}
.ros__card em{font-style:normal;font-size:12px;color:rgba(10,10,10,.65);margin-top:4px}
.ros__card--o{background:#F5480F;color:#fff}.ros__card--o span{color:#fff}.ros__card--o em{color:rgba(255,255,255,.85)}
.ros__card--k{background:#0a0a0a;color:#fff}.ros__card--k em{color:rgba(255,255,255,.7)}
.ros__hint{position:absolute;right:12px;bottom:10px;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.5);pointer-events:none}// Rotating on Scroll · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.ros')||root;var sc=root.querySelector('.ros__scroll'),cards=[].slice.call(root.querySelectorAll('.ros__card'));if(matchMedia('(prefers-reduced-motion: reduce)').matches)return;var raf=0;
function upd(){raf=0;var b=sc.getBoundingClientRect(),H=b.height;cards.forEach(function(c){var r=c.getBoundingClientRect();var p=((r.top+r.height/2)-b.top-H/2)/(H/2);p=Math.max(-1.3,Math.min(1.3,p));var a=Math.abs(p);
c.style.transform='rotateX('+(p*62).toFixed(1)+'deg) rotateZ('+(p*-7).toFixed(1)+'deg) scale('+(1-a*.14).toFixed(3)+')';c.style.opacity=(1-Math.min(1,a)*.55).toFixed(2);});}
sc.addEventListener('scroll',function(){if(!raf)raf=requestAnimationFrame(upd);},{passive:true});addEventListener('resize',upd);upd();
}
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 →