Scroll & Parallax
Scroll animations, parallax, scroll-driven CSS, scrollytelling, sticky and snap.
How to create immersive scroll experiences? These 64 scroll effects cover all modern patterns: parallax, progressive reveals, progress bars, sticky sections and native CSS scroll-driven animations. From subtle reveals to cinematic scrolling.
Scroll Basics
20 fundamental scroll and parallax effects.
First element
Appears rising up with a fade
Second element
Progressive animation on scroll
Third element
Uses animation-timeline: view()
Fourth element
Each element animates individually
Fifth element
All CSS, zero JavaScript
Fade Up
Elements that appear rising up with a progressive fade via animation-timeline: view().
Scale In
Elements that scale up from a smaller size with animation-timeline: view().
Slide In
Elements sliding in from left and right alternately via view().
Parallax
Parallax effect where the background moves at a different speed via scroll(nearest).
Progress Reveal
Text that progressively fills with an animated gradient via scroll(nearest) and @property.
Stagger Cards
Cards appearing in cascade with incremental animation-delay and view().
Horizontal Scroll
Horizontal scrolling with scroll-snap for smooth navigation between elements.
Rotate In
Cards appearing with rotation and scale via view() and animation-delay.
Blur Reveal
Progressive focus effect with blur(20px) animated to blur(0) via view().
Counter Scroll
Animated counters that increment when they enter the container's view.
Scroll-Driven Fade
Native CSS animation driven by scroll with animation-timeline: view() and entry range.
View Timeline Scale
Elements that progressively scale up via animation-timeline: view() and cover range.
Scroll Progress Bar
Sticky progress bar linked to the container scroll via scroll(nearest).
Parallax Layers CSS
Layers moving at different speeds via scroll(nearest) for a depth effect.
Rotate On Scroll
Element performing a 720-degree rotation linked to scroll via scroll(nearest).
Slide In CSS Native
Native CSS left/right slide with animation-timeline: view() and cover range.
Blur to Clear
Transition from blur(10px) to blur(0) for a cinematic effect via view().
Stagger Reveal CSS
Item grid with incremental native CSS animation-delay and view() for a cascade effect.
Clip Path Reveal
Progressive reveal via clip-path: inset() animated by view() and cover range.
Color Change
Progressive color change (purple, pink, cyan, green) linked to scroll via scroll(nearest).
Progress Bar
Scroll to see the bar fill up. Uses animation-timeline: scroll() to link the animation to the container scroll.
Progress Bar
Progress bar linked to scroll via animation-timeline: scroll(). Fills from 0% to 100% in pure CSS.
Fade In Reveal
Elements that progressively appear via animation-timeline: view() and animation-range: entry.
Parallax Layers
Parallax layers with different speeds, driven entirely by scroll() in native CSS.
Scale on Scroll
Cards that scale from 70% to 100% when entering the view via animation-timeline: view().
Color Shift
Background gradient that evolves through 5 color palettes while scrolling, via animation-timeline: scroll().
Text Reveal
Words that slide up from the bottom and progressively reveal while scrolling with view().
Rotate on Scroll
Geometric shape with 720-degree rotation linked to scroll. Borders rotate in the opposite direction.
Slide In Cards
Cards that alternately slide in from left and right with view() and animation-range: entry.
Zoom & Blur
Circle that zooms in and unblurs at the scroll center, then continues zooming and reblurs on exit.
Horizontal Scroll
Vertical scroll converted into horizontal card scrolling via animation-timeline: scroll().
Chapter 1: Introduction
Welcome to this demonstration of a scroll-linked progress bar. The bar at the top of this container progresses based on your scroll position.
This effect uses the CSS property animation-timeline: scroll() which links a @keyframes animation directly to the container's scroll position.
Chapter 2: How It Works
The scroll-timeline property creates a named timeline on the scrollable container. The progress-bar animation then uses this timeline to animate the transform: scaleX() property.
The result is a smooth progress bar that accurately represents the percentage of content read, without any JavaScript.
Chapter 3: Applications
Ideal for blog posts, documentation pages, tutorials, or any long-form content where the user wants to visualize their reading progress.
Compatible with modern browsers supporting Scroll-Driven Animations (Chrome 115+, Edge 115+).
Chapter 4: Conclusion
Scroll-linked animations open new possibilities for user experience, all in pure CSS with no impact on JavaScript performance.
Progress Bar
Reading progress bar driven by animation-timeline: scroll(), zero JavaScript.
Scroll Fade Gallery
Images that fade in and scale up on viewport entry via animation-timeline: view().
Horizontal Scroll Section
Section scrolling horizontally during vertical scroll, pure CSS with scroll-timeline.
Sticky Reveal Stack
Cards stacking and revealing one by one on scroll with view() timeline.
Text Line Reveal
Each word progressively colorizes while scrolling via animation-range and view().
Zoom Into Content
Content starting zoomed out that scales to 100% on scroll, cinematic opening effect.
Rotation on Scroll
Element rotating proportionally to scroll position, dial/compass effect.
Path Drawing on Scroll
SVG path drawing itself via stroke-dashoffset animated by scroll, pure CSS.
Parallax Layers
Multi-layer parallax entirely controlled by scroll() timeline, no JS.
Snap Gallery with Progress
Snap-scrolling gallery with progress bar and dots linked to scroll, pure CSS.
Progress Bar
Horizontal progress bar that fills proportionally to content scrolling.
Parallax Layers
Three visual layers move at different speeds to create an immersive depth effect.
Reveal on Scroll
Elements appear with a fade and vertical slide when they enter the visible area.
Sticky Horizontal
Automatic horizontal scrolling simulating panel navigation, ideal for presenting steps or projects.
Text Highlight on Scroll
Each word progressively lights up as you scroll, creating a guided reading effect.
Zoom on Scroll
An element progressively grows with scrolling, going from a small object to a full-screen view.
Number Counter Scroll
Counters animate from zero to their target value proportionally to the scroll position.
Timeline Scroll
Interactive vertical timeline with a line that progressively draws and elements that appear on scroll.
Image Sequence
Frame-by-frame animation simulation driven by scroll, similar to Apple product pages.
Scroll Snap Sections
Full-height sections with magnetic snapping and side pagination indicator.
Sticky Scroll
8 advanced sticky scroll and parallax effects.
First Section
The image stays fixed while content scrolls. Ideal technique for presenting features.
Second Section
Each text section triggers a visual change in the sticky image.
Third Section
Smooth transitions guide the user through content seamlessly.
Fourth Section
A pattern used in interactive journalism and product websites.
Sticky Image Change
Sticky image that changes while content scrolls with panels revealed via view().
Horizontal Scroll
Horizontal scrolling section with snap to navigate between workflow steps.
Card Stack
Cards that stack with position sticky and view() animation in the container.
Progress Reveal
Sticky progress bar with items progressively revealed via scroll(nearest) and view().
Split Screen Sticky
Sticky visual with rotating SVG and content revealed by scroll via view() and scroll(nearest).
Zoom In Sticky
Element that progressively zooms from scale(1) to scale(2.2) via scroll(nearest).
Text Highlight Scroll
Words colored sequentially on scroll with JS scoped to the container.
Layered Parallax
5 layers moving at different speeds via scroll(nearest) for a complete parallax effect.
Scroll Snap
6 scroll snap effects for precise navigation.
Section 1
Scroll to move to the next one
Section 2
Scroll stops automatically
Section 3
Smooth and controlled experience
Section 4
Last section
Vertical Snap
Sections automatically snapping to start via scroll-snap-type: y mandatory.
Horizontal Snap
Horizontal scrolling with automatic snapping via scroll-snap-type: x mandatory.
Card Snap Carousel
Card carousel aligning to center with scroll-snap-align: center.
Mixed Content Snap
Sections of different sizes with scroll-snap-type: y proximity for flexibility.
Snap + Progress
Vertical snap with progress bar and indicator dots via JS scoped to the container.
Smooth Snap
Snap with animations triggered by IntersectionObserver scoped to the container.
3D Depth Gallery
Immersive Three.js gallery: the camera dives through a stack of images, smooth crossfade, background tinted by the dominant colour, cursor parallax. Cinematic depth sensation.
💡 Perfect for: creative portfolio, product showcase, case study gallery, "our work" page, scroll storytelling.
Chapter 1 — The concept
Scroll inside this area: the glowing bar on the left fills at the exact pace of your reading, with a halo that reacts to position. The further you go, the higher the beam rises.
Chapter 2 — The marker
The luminous cursor slides along the vertical axis. It's an elegant and discreet progress marker, perfect for a long article, documentation page, or a narrative that unfolds on scroll.
Chapter 3 — The mechanics
No external dependency: a simple scroll listener calculates the scrolled / total height ratio and updates a CSS variable. Lightweight, smooth, and fully accessible.
Chapter 4 — Performance
The listener is passive and only touches a custom property, so zero costly reflow. Rendering stays at 60 fps even on mobile, and the bar follows the finger to the pixel.
Chapter 5 — Accessibility
The bar is purely decorative (aria-hidden): content remains fully readable and keyboard-navigable. In reduced-motion mode, instant scrolling replaces smooth-scroll.
Chapter 6 — The end
At the very bottom, the bar is full at 100% and the percentage confirms it. A clear marker from start to finish, without ever stealing attention from the content.
Scroll Progress Beam
A glowing lateral bar that fills with scroll progress, reactive halo and sliding cursor. Premium, discreet reading marker.
💡 Perfect for: article progress bar, long page / docs, multi-section onboarding, storytelling landing.
Scroll Velocity Feedback
Elements react to scroll speed: dynamic stretching and tilt that give physical weight to scrolling, then snapping back to sharp at rest.
💡 Perfect for: editorial gallery, project grid, immersive feed, creative "about" page.
Pinned Image Sequence
A pinned object whose 360° rotation is driven by scroll, Apple-style product sequence. Here, a real 3D model (.glb, self-hosted, loaded on demand) rotates as you scroll.
💡 Perfect for: 360° product view, feature/teardown reveal, launch page, step-by-step visual tutorial.
Sticky Horizontal Reveal
A pinned section whose content scrolls horizontally as you scroll vertically. Tells a progression (process, timeline, steps) in a cinematic way.
💡 Perfect for: process/step presentation, timeline, portfolio showcase, narrative product page.
Scroll Choreography Sequence
Multi-element orchestration: headline, text, badges and CTA enter in cascade on the scroll timeline, like a scene being built. Each element has its own progress window.
💡 Perfect for: assembling hero section, feature presentation, brand storytelling, "manifesto" section.