Scroll 3D Carousel
Rings of cards that turn half a revolution as each section scrolls past.
The Scroll 3D Carousel builds a ring of cards for each part of the page and turns it as the visitor scrolls. The cards travel around a real circle in space, brightening as they come forward and falling into shadow as they swing behind, while the title of the work holds the centre of the screen.
How it works
Each section holds a ring of cards standing in a circle, positioned by rotating every card around a shared centre and pushing it outward. The ring is tied to the scrollbar rather than a clock, so scrolling through the section turns it exactly half a revolution, tilts it a few degrees on two axes and dims the cards from bright to shadowed as they travel. The title floats over the middle at a slower parallax speed, and every section can start the ring at a different angle so no two look alike.
When to use it
Dressed here as a contemporary dance company, it suits anything organised into named chapters: a theatre season, a fashion calendar, a service list, a set of case studies. Four to six images per ring is the sweet spot, and it needs each chapter to have a title worth reading.
Why it works
Tying the turn to the scrollbar means the visitor controls it, so browsing feels like operating a machine rather than watching a slideshow. Because the rotation reverses when they scroll back up, people play with it, and every pass shows a different face of the ring, which makes a small set of images feel much larger than it is.
Recommended for
- Theatre and dance companies
- Seasons and collections
- Case study chapters
- Editorial storytelling
Common questions
How is this different from a normal carousel?
A normal carousel moves one item at a time when you click. This one is a physical ring in 3D space that turns continuously with your scrolling, so the whole set is always in motion and the visitor never has to press anything.
Can each section show a different set of images?
Yes. Every section is its own ring with its own images, title and starting angle, so a season, a collection or a service list can each get a ring of their own down the page.
Where does the effect come from?
It follows the MIT licensed Codrops demo On-Scroll 3D Carousel, rebuilt as a complete site for this demonstration.