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.

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.

Demo and Download

SIMPLE SCROLL ANIMATION

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

Demo and Download

SKEW SCROLLING EFFECT

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

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.

Demo and Download

ONE PAGE SCROLL

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

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.

Demo and Download

SCROLLING HALF BY HALF

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

Demo and Download