41 CSS Parallax Effects
This collection showcases flexible parallax solutions that use CSS Custom Properties (Variables) to define and easily adjust parameters like perspective distance and scroll speed. Learn to apply the parallax illusion not just to backgrounds, but to foreground elements, creating scalable and versatile UI components that maintain visual fidelity and code simplicity.
Last updated:
Floating Headers
Impressive, weighty 3D typography that reacts to scrolling with a natural shift in perspective, reminiscent of volumetric signage or cinematic titles.
Scroll-Driven Gallery
A demonstration of the new CSS Scroll-Driven Animations (SDA) API, where the scroll position of the entire page directly drives a complex, scaling, and rotating grid of images, achieving a high-performance, engaging visual effect purely with CSS.
3D Parallax Navigation with 'Fisheye' Hover Effect (CSS-Only)
A stunning CSS-only 3D parallax navigation with a “fisheye” hover effect, achieved using transform-style: preserve-3d and a translateZ function tied to cursor position. The core mechanism is the mathematical calculation of CSS variables.
Sliding Images Using Animation-timeline
This scroll-driven animation effect is built entirely with CSS Scroll-Driven Animations, using animation-timeline: scroll(). It smoothly translates and transforms elements based on scroll position, creating a dynamic and high-performance parallax effect without JavaScript.
CSS Only Parallax Layers
A parallax effect implemented entirely in pure CSS using animation-timeline: view(). This modern solution ensures high performance as the animation is tied directly to the scroll position, eliminating the need for JavaScript.
Olly Moss Star Wars Parallax
A multi-layered 3D parallax poster of C-3PO from Star Wars, driven by JavaScript mouse tracking.
CSS-only Sliding Panels Using Transforms
A responsive Flexbox split layout that switches from horizontal to vertical via a media query. The “sliding doors” effect is created with pure CSS using transform and the sibling selector, while the parallax on hover is achieved with different content movement speeds controlled by LESS variables.
Scroll Flip-Book
A demonstration of one of the oldest and most reliable tricks for a parallax effect: the background-attachment: fixed property makes the section backgrounds stay in place relative to the viewport while the sections themselves scroll, creating an illusion of motion.
Let it Snow
See how to create an illusion of depth and movement in a snowfall using only animated multi-layer backgrounds.
One Element CSS Snow
A revolutionary snow effect using just one HTML element. SCSS-powered radial-gradient generation and a three-layer background animation create realistic depth and high performance.
