Collection of hand-picked free HTML and CSS scroll effect code examples from Codepen, GitHub and other resources. Update of May 2021 collection. 8 new items.

Related Articles

  1. jQuery Scroll Effects

Author

  • Shaw

Made with

  • HTML / CSS (SCSS)

About a code

3D CSS Scroll

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Adam Argyle

Made with

  • HTML / CSS

About a code

Horizontal Scroller Edge Fade Mask

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

CSS Only Scrolling Shadow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Adam Argyle

Made with

  • HTML / CSS

About a code

Full Screen Vertical Scroll Snap

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Håvard Brynjulfsen

Made with

  • HTML / CSS (SCSS)

About a code

Overlapping Horizontal Slideshow Using position: sticky;

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Inès

Made with

  • HTML / CSS (SCSS)

About a code

Horizontal Scrolling with position: sticky

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Bramus

Made with

  • HTML / CSS

About a code

Stacking Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Adam Argyle

Made with

  • HTML / CSS

About a code

CSS Fixed Conic Fill

Scroll contextual conic gradient text. Text mask revealing "fixed to viewport" background gradient.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Blake Eric

Made with

  • HTML / CSS

About a code

Knockout Text Scroll Reveal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Paulina Hetman

Made with

  • HTML / CSS

About a code

CSS-Only Horizontal Parallax Gallery

A few beautiful photos from Paris in this experimental gallery. Uses transforms together with perspective property for parallax.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Henry Zarza

Made with

  • HTML / CSS

About a code

Overlapping Sections

Overlapping section with position sticky.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Gabriele Corti

Made with

  • HTML / CSS (SCSS)

About a code

12 nth Selectors

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

Full Bleed Banner

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Andrej Sharapov

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

CSS Scroll-Behavior: Smooth

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Andrej Sharapov

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

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.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Ryan Mulligan

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

CSS Scroll Reveal Sections

Use the clip-path property to create fixed position hero sections.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mert Cukuren

Made with

  • HTML / CSS (SCSS) / JavaScript (Babel)

About the code

Simple Scroll Animation

Simple scroll animation in HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Dronca Raul

Made with

  • HTML / CSS (SCSS) / JavaScript (Babel)

About the code

Skew Scrolling Effect

Skew scrolling effect in HTML, CSS and JS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • magnificode

Made with

  • HTML / CSS (SCSS) / JavaScript (Babel)

About the code

Background and Text Scroll Effect

Super quick idea for a text reveal effect on scroll.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Mike

Made with

  • HTML / CSS (SCSS)

About a code

Scrolling Gradient

A background gradient that adapts to scroll position.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Quentin Veron

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

One Page Scroll

One page scroll. Not a single line of JavaScript!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Raymond Lopez

Made with

  • HTML / CSS

About a code

Dual Color Text Scroll Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • David A.

Made with

  • HTML (Pug) / CSS (SCSS) / JavaScript (Babel)

About the code

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.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Kseso

Made with

  • HTML / CSS

About the code

Scrolling Half by Half

Scrolling half by half in pure CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Giana

Made with

  • HTML / CSS (SCSS)

About a code

CSS Background Change On Scroll

Fixed element appears to change color when entering different sections. Uses duplicated elements for every section. Now with blend-mode magic for added effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -