Layers of geometric shapes move at different speeds as you scroll, creating a sense of depth and dimension throughout the page.
Parallax scrolling uses differential scroll speeds to simulate depth. Background layers move slower than foreground elements, mimicking how we perceive distance in the physical world.
Each shape has its own data-speed attribute controlling how fast it moves relative to the scroll position. Lower values move slower, appearing further away.
All parallax motion uses CSS transforms instead of top/left positioning. This ensures animations run on the GPU for smooth 60fps performance even with many layers.
Circles, diamonds, rings, and lines compose each parallax scene. The abstract shapes keep focus on the motion itself rather than specific imagery.
The most effective parallax uses restrained speed differences. Exaggerated parallax can cause motion sickness or feel gimmicky. These demos keep speeds between 0.15 and 0.6.
Four parallax sections, each with its own color palette and shape arrangement. The technique scales to any number of layers and sections.