Top 8 CSS Scroll Effects

Collection of hand-picked free HTML and CSS scroll effect code examples.

CSS SCROLL-BEHAVIOR, SCROLL-SNAP-TYPE & MIX-BLEND-MODE

The scroll-behavior and scroll-snap-type CSS properties are amazing tools for creating landing pages without using js. Unfortunately, these properties are not yet supported in all browsers. Made with HTML (Pug) / CSS (SCSS) by Andrej Sharapov.

See the Pen
CSS scroll-behavior, scroll-snap-type & mix-blend-mode
by Andrej Sharapov (@andrejsharapov)
on CodePen.

Demo and Download

CSS SCROLL REVEAL SECTIONS

Use the clip-path property to create fixed position hero sections. Made with HTML (Pug) / CSS (SCSS) by Ryan Mulligan.

See the Pen
CSS Scroll Reveal Sections
by Ryan Mulligan (@hexagoncircle)
on CodePen.

Demo and Download

SIMPLE SCROLL ANIMATION

Simple scroll animation in HTML, CSS and JS. Made with HTML / CSS (SCSS) / JavaScript (Babel) by Mert Cukuren.

See the Pen
simple scroll animation
by Mert Cukuren (@knyttneve)
on CodePen.

Demo and Download

SKEW SCROLLING EFFECT

Skew scrolling effect in HTML, CSS and JS. Made with HTML / CSS (SCSS) / JavaScript (Babel) by Dronca Raul.

See the Pen
Skew Scrolling Effect ▲
by Dronca Raul (@rauldronca)
on CodePen.

Demo and Download

BACKGROUND AND TEXT SCROLL EFFECT

Super quick idea for a text reveal effect on scroll. Made with HTML / CSS (SCSS) / JavaScript (Babel) by magnificode.

See the Pen
Codevember 4 :: Sky
by magnificode (@magnificode)
on CodePen.

Demo and Download

ONE PAGE SCROLL

One page scroll. Not a single line of JavaScript!. Made with HTML (Pug) / CSS (SCSS) by  Quentin Veron.

See the Pen
[Pure CSS] – One page scroll
by Quentin Veron (@VeronQ)
on CodePen.

Demo and Download

INTERSECTION OBSERVER

API that can be used to understand the visibility and position of DOM elements relative to a containing element or to the top-level viewport. The position is delivered asynchronously and is useful for understanding the visibility of elements and implementing pre-loading and deferred loading of DOM content. Made with HTML (Pug) / CSS (SCSS) / JavaScript (Babel) by David A.

See the Pen
IntersectionObserver demo/test
by David A. (@meodai)
on CodePen.

Demo and Download

SCROLLING HALF BY HALF

Scrolling half by half in pure CSS. Made with HTML / CSS by Kseso.

See the Pen
Scrolling half by half pure #CSS by @Kseso
by Kseso (@Kseso)
on CodePen.

Demo and Download

Praveen Kumar

I am a fullstack web developer with a passion for SEO, creating stunning websites, and organic marketing. I am a perfectionist.

Post navigation