Infinite Parallax Scroll with Minimap
What it does
Infinite vertical scroll through fullscreen project images with a synchronized centered minimap that mirrors the scroll at miniature scale. A hand-rolled rAF loop lerps a virtual scroll target driven by wheel and touch drag, recycles DOM slides around the current index for endless looping, applies per-image parallax (0.2x translateY on scale(1.5) images), and snaps to the nearest project with a 500ms cubic ease-out after 100ms of idle.
How it's built
| Category | scroll |
|---|---|
| Tech | vanilla JS |
| Complexity | page |
| Performance cost | light |
| Mobile-safe | yes |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Build: Infinite Parallax Scroll with Synchronized Minimap
## Goal
A full-screen, **infinitely looping vertical scroll** through editorial project images, with a **centered floating minimap** that mirrors the exact same scroll at miniature scale. The star effect: a hand-rolled `requestAnimationFrame` engine that lerps a virtual scroll position driven by wheel + touch, recycles a small window of DOM slides for endless looping, applies **per-image parallax**, and **magnetically snaps to the nearest project** after the user stops scrolling. The big slides and the tiny minimap move in perfect proportional lockstep.
## Tech
Vanilla HTML/CSS/JS with ES module imports (Vite/npm project). **No GSAP, no ScrollTrigger, no Lenis, no animation library at all** — the entire motion system is a single custom `requestAnimationFrame` loop with a manual `lerp()` helper and custom `wheel`/`touch` listeners. Everything is driven by imperative `element.style.transform` writes. Desktop uses wheel; mobile uses touch drag.
## Layout / HTML
Minimal shell — JS generates all repeating content dynamically:
```html
<div class="container">
<ul class="project-list"></ul> <!-- full-screen slides injected here -->
<div class="minimap">
<div class="minimap-wrapper">
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.