Scroll Image Marquee
Row of images slides horizontally driven by scroll position.
SCROLL
How to use it
- Paste the HTML where the scroll effects should appear. Include the script tags at the top once per page.
- 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.
<!-- Scroll Image Marquee · NedDev · eigen werk. -->
<!-- benodigd, één keer per pagina: -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<div class="jouw-container">
<div class="sim-row sim-a"></div><div class="sim-row sim-b"></div><div class="sim-label">SCROLL</div>
</div>/* Scroll Image Marquee · NedDev · eigen werk. */
.sim-stage{position:relative;width:100%;height:100%;background:#0a0a0a;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:14px}
.sim-row{display:flex;gap:14px;width:max-content;will-change:transform}.sim-row>span{display:block;width:150px;height:96px;border-radius:10px;flex:0 0 auto;background-size:cover}
.sim-b{align-self:flex-end}.sim-label{position:absolute;top:12px;left:14px;font:700 11px/1 'JetBrains Mono',monospace;letter-spacing:.4em;color:#F5480F}// Scroll Image Marquee · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root.classList.add('sim-stage');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;
function mk(h){return 'url("data:image/svg+xml,'+encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="150" height="96"><rect width="150" height="96" fill="hsl('+h+',16%,14%)"/><rect x="10" y="10" width="130" height="76" rx="6" fill="none" stroke="hsl('+h+',70%,52%)" stroke-width="2"/></svg>')+'")';}
var a=root.querySelector('.sim-a'),b=root.querySelector('.sim-b');for(var k=0;k<10;k++){var sa=document.createElement('span');sa.style.backgroundImage=mk((k*36)%360);a.appendChild(sa);var sb=document.createElement('span');sb.style.backgroundImage=mk((k*36+180)%360);b.appendChild(sb);}
if(window.gsap&&window.ScrollTrigger&&!reduce){gsap.registerPlugin(ScrollTrigger);gsap.fromTo(a,{xPercent:0},{xPercent:-38,ease:'none',scrollTrigger:{trigger:root,start:'top bottom',end:'bottom top',scrub:true}});gsap.fromTo(b,{xPercent:-38},{xPercent:0,ease:'none',scrollTrigger:{trigger:root,start:'top bottom',end:'bottom top',scrub:true}});}else if(!reduce){var x=0;(function loop(){x=(x-.4)%200;a.style.transform='translateX('+x+'px)';b.style.transform='translateX('+(-200-x)+'px)';requestAnimationFrame(loop);})();}
}
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 →