25+ Stunning CSS Scroll Effects

Enjoy this 100% free and open source collection of HTML and CSS scroll effect code examples. These scroll effects will add some flavor to your website.

1. Background Sky Text Scroll Effect (CSS)

CSS Scroll Effects - Background Sky Text Scroll Effect (CSS)
Author: magnificode (magnificode)
Created on: November 5, 2018
Made with: HTML, SCSS, Babel
Tags: codevember, background-clip, css

2. CSS Scrolling Gradient

CSS Scroll Effects - CSS Scrolling Gradient
I decided to adapt the CSS Only Scroll Indicator technique (https://codepen.io/MadeByMike/pen/ZOrEmr), to make a background gradient that adapts to scroll position.
Author: Mike (MadeByMike)
Created on: June 27, 2018
Made with: HTML, SCSS

3. Scrolling Half By Half Pure CSS

CSS Scroll Effects - Scrolling Half By Half Pure CSS
A Split screen gallery
Author: Kseso (Kseso)
Created on: August 6, 2017
Made with: HTML, CSS
Tags: gallery, pure-css, scroll, impocssible

4. CSS Background Change On Scroll Effect

CSS Scroll Effects - CSS Background Change On Scroll Effect
Fixed element appears to change color when entering different sections. Uses duplicated elements for every section. Now with blend-mode magic for added effect. Inspired by Marco Fugaro's Pen Changing color when hover another section.
Author: Giana (giana)
Created on: August 5, 2015
Made with: HTML, SCSS
Tags: css, clip, fixed, blend-mode, scroll

5. Full Bleed Banner Demo

CSS Scroll Effects - Full bleed banner demo
Original idea - my version uses a calc() value for margin-left, eliminating the need for a transform, which I don't really like using for initial positioning. By initial positioning I mean the position of an element before animating it. Animation is the main reason why I prefer not to u...
Read More
Author: Ana Tudor (thebabydino)
Created on: April 9, 2019
Made with: HTML, SCSS
Tags: calc

6. Overlapping Sections

CSS Scroll Effects - Overlapping sections
Test of overlapping section with position sticky
Author: Henry Zarza (HenryZarza)
Created on: December 11, 2019
Made with: HTML, CSS
Tags: overlapping sections, position-sticky

7. CSS Scroll-behavior, Scroll-snap-type & Mix-blend-mode

CSS Scroll Effects - 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.😞 See through browser Firefox
Author: Andrej Sharapov (andrejsharapov)
Created on: February 27, 2019
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug

8. Css Scroll-behavior: Smooth

CSS Scroll Effects - css scroll-behavior: smooth
Author: Andrej Sharapov (andrejsharapov)
Created on: April 3, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug

9. CSS Scroll Effects

CSS Scroll Effects - CSS Scroll Effects
Author: Mert Cukuren (knyttneve)
Made with: HTML, SCSS, Babel

10. CSS Scroll Reveal Sections

CSS Scroll Effects - CSS Scroll Reveal Sections
Use the clip-path property to create fixed position hero sections
Author: Ryan Mulligan (hexagoncircle)
Created on: January 14, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: clip-path, hero, scroll section, css, fixed-position

11. Pure CSS One Page Scroll

CSS Scroll Effects - Pure CSS One Page Scroll
Author: Nikolay Talanov (suez)
Created on: November 4, 2015
Made with: HTML, SCSS, JS

12. Skew Scrolling Effect ▲

CSS Scroll Effects - Skew Scrolling Effect ▲
Author: Dronca Raul (rauldronca)
Created on: December 4, 2018
Made with: HTML, SCSS, Babel

13. IntersectionObserver Demo/test

CSS Scroll Effects - IntersectionObserver demo/test
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 loadin...
Read More
Author: David A. (meodai)
Created on: August 7, 2017
Made with: Pug, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug

14. CSS Scroll Effect

CSS Scroll Effects - CSS Scroll Effect
Parallax-like scroll effect made with a fixed background that has low z-index, making the content scroll over. To see more stuff like this go check out pure's CSS framework at http://purecss.io
Author: Tim Robert-Fitzgerald (terf)
Created on: February 15, 2014
Made with: HTML, CSS, JS
Tags: parallax, scroll, css

15. Illustrated CSS Scroll Effect

CSS Scroll Effects - Illustrated CSS Scroll Effect
Shows how to achieve a scrolling parallax effect using CSS and HTML.
Author: Sebastian Schepis (sschepis)
Made with: HTML, SCSS

16. Pure CSS Parallax Effect

CSS Scroll Effects - Pure CSS Parallax Effect
Author: Joshua Bemenderfer (tribex)
Created on: April 9, 2017
Made with: HTML, CSS

17. CSS-Only Parallax Effect

CSS Scroll Effects - CSS-Only Parallax Effect
No Javascript required. Just plain CSS.
Author: Yago Estévez (yagoestevez)
Created on: October 6, 2018
Made with: Pug, CSS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: parallax, effect, css, scroll

18. Pure CSS Parallax Scrolling

CSS Scroll Effects - Pure CSS Parallax Scrolling
Following along a tutorial by codegrid
Author: Carlos (CarlosVieira)
Created on: May 3, 2018
Made with: HTML, CSS

19. Simple, Pure CSS Parallax Effect

CSS Scroll Effects - Simple, Pure CSS Parallax Effect
Perhaps not technically parallax, but still very cool! background-attachment: fixed; is the magic here. It makes the background of a given element fixed to the view port regardless of where the element is on the page. In a way, the element is acting as a window to view the background. Ins...
Read More
Author: Kenneth Powers (KenPowers)
Created on: April 22, 2014
Made with: Pug, Less
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, parallax, pure

20. Page Scroll Effects

CSS Scroll Effects - Page Scroll Effects
Page Scroll Effect Examples with (varients for animation styles and an option for enabling/disabling scroll jacking) (Forked Off from the demo on http://www.codyhouse.co)
Author: Steve (slstudios)
Created on: June 11, 2015
Made with: HTML, CSS, JS
Tags: page scroll, page scroll effect, scroll-animation

21. Scrolling Effect Kinda 3d

CSS Scroll Effects - Scrolling effect kinda 3d
Used this effect on a project and wanted to share it. Might be some improvements to make, ain't no javascript master yet. PS: Thx people in the comments, you helped me learn so much JS stuff :)
Author: Jerome Renders (JeromeRenders)
Created on: December 14, 2015
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: scroll, 3d, kinda

22. Skewed One Page Scroll

CSS Scroll Effects - Skewed One Page Scroll
Forked from Nikolay Talanov's Pen Skewed One Page Scroll.
Author: Peter McGriff (pmcgriff)
Created on: November 5, 2015
Made with: HTML, SCSS, JS

23. Scroll Animations

CSS Scroll Effects - Scroll Animations
Trigger CSS animations on scroll. Detailed explanation can be found at http://www.bram.us/2013/11/20/scroll-animations/
Author: Bramus (bramus)
Created on: November 20, 2013
Made with: HTML, CSS, JS