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.
CSS SCROLL REVEAL SECTIONS
Use the clip-path
property to create fixed position hero sections. Made with HTML (Pug) / CSS (SCSS) by Ryan Mulligan.
SIMPLE SCROLL ANIMATION
Simple scroll animation in HTML, CSS and JS. Made with HTML / CSS (SCSS) / JavaScript (Babel) by Mert Cukuren.
SKEW SCROLLING EFFECT
Skew scrolling effect in HTML, CSS and JS. Made with HTML / CSS (SCSS) / JavaScript (Babel) by Dronca Raul.
BACKGROUND AND TEXT SCROLL EFFECT
Super quick idea for a text reveal effect on scroll. Made with HTML / CSS (SCSS) / JavaScript (Babel) by magnificode.
ONE PAGE SCROLL
One page scroll. Not a single line of JavaScript!. Made with HTML (Pug) / CSS (SCSS) by Quentin Veron.
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.
SCROLLING HALF BY HALF
Scrolling half by half in pure CSS. Made with HTML / CSS by Kseso.