Magazine page turn
A two-page magazine spread whose leaves turn one by one, with a shadow that follows the curl.
61 scroll effects you can copy.
Live demos of page turns, reveals, parallax, sticky stories, snapping and more. Open any of them to read the code, copy it, or download it as a single HTML file.
Page turn
10 effectsPages, cards and panels that flip, fold, peel and swing open.
Tear-off calendar
Daily calendar sheets rip away and tumble off the pad, one day per stretch of scrolling.
Split-flap board
An airport departures board that rattles through letters to a new word at each step of the scroll.
Card swipe deck
Cards fly off a pinned deck to the left and right, each one stamped as it goes, like swiping through profiles.
Cover slides
Each full-screen slide slides up over the last, which sinks back, dims and rounds its corners.
Corner page peel
The bottom corner of a page curls up and folds back across the sheet, uncovering the page beneath.
Venetian blinds
A scene swaps for another as horizontal slats rotate in a wave, like blinds being turned.
Double doors
Two panelled doors swing open towards you to reveal the room behind them.
Accordion paper fold
A folded letter opens panel by panel, zig-zag style, as you scroll it open.
Notepad flip-up
Sheets of a spiral-bound notepad lift towards you and flip over the top binding.
Reveal
7 effectsContent that appears as it enters the screen.
Staggered fade-up
Tiles rise into place in a short wave as each row enters the viewport.
Clip-path curtain
Artwork panels open from the centre like a curtain, tied directly to scroll position.
Focus pull
Lines of text come into focus at the centre of the screen and blur away at the edges.
Line mask reveal
Headlines slide up from behind an invisible mask, one line after another.
Zoom into view
Cards grow from small and faded to full size as they cross the viewport. No JavaScript.
Mosaic reveal
A grid of dark tiles spins away in random order to uncover the artwork underneath.
Spotlight circle
A circle of light grows from the centre of a black screen until the whole scene is lit.
Parallax
6 effectsLayers moving at different speeds to suggest depth.
Layered landscape
Five mountain ridges slide at different speeds to build depth out of flat shapes.
Opposing rows
Rows of oversized words drift left and right in alternating directions as you scroll.
Floating depth cards
Scattered cards drift at their own speeds, so the page feels like a stack of glass sheets.
Window parallax
Images inside fixed frames slide more slowly than the frames themselves.
Hero zoom-out
A full-bleed hero shrinks into a framed card while its title drifts up and fades.
Split columns
Three columns of tiles glide in opposite directions while the page holds still.
Progress
6 effectsIndicators that show where you are on a page.
Reading progress bar
A thin bar across the top fills as you move through an article.
Circular progress
A ring in the corner fills with your scroll position and doubles as a back-to-top button.
Scrollspy dots
A column of dots shows which full-height section you are in and jumps to any of them.
Chapter progress
A table of contents where every chapter has its own small bar showing how far into it you are.
Page minimap
A miniature of the whole page sits in the corner, with a window showing where you are. Click it to jump.
Vertical timeline
A centre line fills downward as you read, and each milestone lights up when the line reaches it.
Sticky
5 effectsElements that pin in place while the rest scrolls on.
Stacking cards
Cards pin one on top of another and the ones underneath shrink back into a neat pile.
Sticky scrollytelling
A pinned graphic changes shape and colour as each step of the story scrolls past beside it.
Smart header
The header shrinks after the first scroll, hides when you read down, and returns when you scroll up.
Sticky group headers
Letter headers in a contact list stick to the top and push each other away. Pure CSS.
Curtain footer
The page lifts away at the end like a curtain to reveal a footer that was waiting underneath. No JavaScript.
Text
7 effectsTypography that reacts to scroll position and speed.
Word-by-word highlight
A pinned paragraph lights up one word at a time as you scroll through it.
Velocity skew
Headlines lean into the direction of travel when you scroll fast and spring back when you stop.
Scroll typewriter
A sentence types itself out, character by character, exactly as fast as you scroll.
Velocity marquee
A ticker that always drifts, speeds up with your scroll and flips direction when you scroll back.
Outline fill
Huge outlined words fill with solid colour from left to right as they pass through the screen.
Scramble decode
Headings arrive as random characters and decode into words from left to right.
Letter assemble
Scattered, spinning letters fly together into a word as you scroll, and scatter again on the way back.
Horizontal
3 effectsVertical scrolling that moves things sideways.
Horizontal pin
Scrolling down slides a row of panels sideways, then lets the page carry on vertically.
Horizontal timeline
A pinned timeline slides past while a line draws along it and each year lights up as it is reached.
Filmstrip parallax
A pinned filmstrip slides sideways while the picture inside every frame drifts the other way.
Snap
3 effectsScrolling that settles on exact positions.
Full-page snap
Every flick lands exactly on the next full-screen slide, like a presentation. No JavaScript.
Snap focus list
A list snaps each item to the centre and enlarges whichever item is in focus.
Snap stories
Full-screen story slides that snap into place, with segmented progress bars across the top.
3D
5 effectsPerspective and depth driven by scroll.
Scroll cube
A pinned 3D cube turns to a new face for each quarter of the section.
Tilt-in cards
Cards lie back like pages on a desk and stand upright as they reach the middle of the screen.
Ring tunnel
Scrolling flies you forward through a tunnel of glowing rings.
Flip book
Pages of a pinned book turn one after another as you scroll, each folding over its spine.
Cylinder carousel
Cards arranged around a 3D cylinder spin past the viewer as you scroll.
Data
5 effectsNumbers, charts and lines that animate into view.
Count-up stats
Numbers roll up from zero with an ease-out curve the moment they come into view.
Growing bar chart
Bars of a chart grow to their values in sequence when the chart scrolls into view.
SVG route draw
A winding route draws itself down the page, and checkpoints light up as the line reaches them.
Gauge rings
Three ring gauges sweep to their values with the numbers counting up alongside.
Scrubbed line chart
A pinned line chart draws itself with your scroll, and a marker reads out the value at the tip.
Color
4 effectsPalettes that shift as the page moves.
Section colour blend
The page background melts smoothly from one section’s colour into the next.
Hue orbit
Soft colour blobs rotate around the centre and shift through the spectrum as you scroll.
Invert on enter
The whole page switches to a dark theme while a dark section is in the middle of the screen.
Day-to-night sky
The sun arcs across a pinned sky and sets, the colours run from dawn to dusk, and stars come out.
Every effect is one small file.
Hover to preview
Each card is a working page in miniature. Point at it and it scrolls itself, so you can see the effect before opening it. On phones, cards play when they reach the middle of the screen.
No libraries
Plain HTML, CSS and a few lines of JavaScript at most. Nothing to install, no build step. Paste the code into any project and it works.
Copy or download
On an effect’s page you can read the HTML, CSS and JavaScript separately, copy any part, or download the whole thing as a standalone .html file.