ParallaxScrolling

Parallax scrolling is a visual effect used in web design and video games in which layers in a scene move at different speeds relative to the viewer as the user scrolls or moves, creating an impression of depth.

The term parallax originates from the astronomical concept of parallax, where objects appear to shift against distant backgrounds as the observer changes position. In computer graphics, this principle is applied by layering images at varying distances to simulate depth.

In websites, parallax scrolling often involves multiple background and foreground layers that slide at different rates when the page is scrolled, or on pointer movement for interactive experiences. In 2D games, it refers to background layers moving at different speeds to simulate depth and parallax, enhancing the sense of immersion in side-scrolling environments.

Techniques range from CSS-driven methods to JavaScript-based animations. Common approaches include translating layers with CSS transforms (often using translate3d) in response to scroll, sometimes with perspective to exaggerate depth, or using scroll-driven animation APIs. Some implementations rely on background-position or background-attachment strategies, though these can be less flexible and harder to synchronize with content.

Performance and accessibility considerations include ensuring the effect remains smooth on various devices, avoiding excessive repaints, and providing a mechanism to disable motion for users who prefer reduced motion. Developers should test on mobile devices, use requestAnimationFrame for updates, and respect the prefers-reduced-motion media query.