Kaarten op eigen snelheid
Three project cards each move at a different speed as the page scrolls, creating depth; for a portfolio or case overview.
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.
<!-- Kaarten op eigen snelheid · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-pic"><figure class="ei-pic__c ei-pic__c--a" data-s="-0.18"><div class="ei-pic__img"></div><figcaption>Woonhuis Bloemendaal</figcaption></figure><figure class="ei-pic__c ei-pic__c--b" data-s="0.12"><div class="ei-pic__img"></div><figcaption>Kantoor Eindhoven</figcaption></figure><figure class="ei-pic__c ei-pic__c--c" data-s="-0.32"><div class="ei-pic__img"></div><figcaption>Loft Groningen</figcaption></figure></div>
</div>/* Kaarten op eigen snelheid · NedDev · eigen werk. */
.ei-pic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:4%;padding:0 5%;overflow:hidden}
.ei-pic__c{margin:0;flex:1;max-width:96px;will-change:transform}
.ei-pic__img{aspect-ratio:3/4;border-radius:4px;background-size:cover}
.ei-pic__c--a .ei-pic__img{background:linear-gradient(170deg,#e9dccb 0 45%,#c8b39a 45% 70%,#8a6f55 70%)}
.ei-pic__c--b .ei-pic__img{background:linear-gradient(180deg,#0a0a0a 0 30%,#2b2b2b 30% 32%,#0a0a0a 32% 60%,#2b2b2b 60% 62%,#0a0a0a 62%),#0a0a0a;box-shadow:inset 0 0 0 6px #F5480F}
.ei-pic__c--c .ei-pic__img{background:radial-gradient(circle at 70% 25%,#ffd2b8 0 14%,transparent 15%),linear-gradient(160deg,#F5480F,#9a2b06)}
.ei-pic__c figcaption{margin-top:8px;font-family:'Switzer',sans-serif;font-weight:600;font-size:11px;color:#0a0a0a;line-height:1.3}// Kaarten op eigen snelheid · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ei-pic'),cs=[].slice.call(w.querySelectorAll('.ei-pic__c')),raf=0;
if(!matchMedia('(prefers-reduced-motion: reduce)').matches){
function upd(){raf=0;var r=w.getBoundingClientRect(),vh=window.innerHeight,d=(r.top+r.height/2)-vh/2;var lim=r.height*.14;
cs.forEach(function(c){var y=d*+c.dataset.s;y=Math.max(-lim,Math.min(lim,y));c.style.transform='translate3d(0,'+y.toFixed(1)+'px,0)';});}
window.addEventListener('scroll',function(){if(!raf)raf=requestAnimationFrame(upd);},{passive:true});window.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 →