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.
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.
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.
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.
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.
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.
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.
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.