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)
Author: magnificode (magnificode)
Created on: November 5, 2018
Made with: HTML, SCSS, Babel
Tags: codevember, background-clip, css
2. 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)
Links: Source Code / Demo
Created on: June 27, 2018
Made with: HTML, SCSS
3. Scrolling Half By Half Pure CSS
A Split screen gallery
Author: Kseso (Kseso)
Links: Source Code / Demo
Created on: August 6, 2017
Made with: HTML, CSS
Tags: gallery, pure-css, scroll, impocssible
4. 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)
Links: Source Code / Demo
Created on: August 5, 2015
Made with: HTML, SCSS
Tags: css, clip, fixed, blend-mode, scroll
5. 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)
Links: Source Code / Demo
Created on: April 9, 2019
Made with: HTML, SCSS
Tags: calc
6. Overlapping Sections
Test of overlapping section with position sticky
Author: Henry Zarza (HenryZarza)
Links: Source Code / Demo
Created on: December 11, 2019
Made with: HTML, CSS
Tags: overlapping sections, position-sticky
7. 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)
Links: Source Code / Demo
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
Author: Andrej Sharapov (andrejsharapov)
Links: Source Code / Demo
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
Author: Mert Cukuren (knyttneve)
Links: Source Code / Demo
Made with: HTML, SCSS, Babel
10. CSS Scroll Reveal Sections
Use the clip-path property to create fixed position hero sections
Author: Ryan Mulligan (hexagoncircle)
Links: Source Code / Demo
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
Author: Nikolay Talanov (suez)
Links: Source Code / Demo
Created on: November 4, 2015
Made with: HTML, SCSS, JS
12. Skew Scrolling Effect ▲
Author: Dronca Raul (rauldronca)
Links: Source Code / Demo
Created on: December 4, 2018
Made with: HTML, SCSS, Babel
13. 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)
Links: Source Code / Demo
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
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)
Links: Source Code / Demo
Created on: February 15, 2014
Made with: HTML, CSS, JS
Tags: parallax, scroll, css
15. Illustrated CSS Scroll Effect
Shows how to achieve a scrolling parallax effect using CSS and HTML.
Author: Sebastian Schepis (sschepis)
Links: Source Code / Demo
Made with: HTML, SCSS
16. Pure CSS Parallax Effect
Author: Joshua Bemenderfer (tribex)
Links: Source Code / Demo
Created on: April 9, 2017
Made with: HTML, CSS
17. CSS-Only Parallax Effect
No Javascript required. Just plain CSS.
Author: Yago Estévez (yagoestevez)
Links: Source Code / Demo
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
Following along a tutorial by codegrid
Author: Carlos (CarlosVieira)
Links: Source Code / Demo
Created on: May 3, 2018
Made with: HTML, CSS
19. 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)
Links: Source Code / Demo
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
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)
Links: Source Code / Demo
Created on: June 11, 2015
Made with: HTML, CSS, JS
Tags: page scroll, page scroll effect, scroll-animation
21. 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)
Links: Source Code / Demo
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
Forked from Nikolay Talanov's Pen Skewed One Page Scroll.
Author: Peter McGriff (pmcgriff)
Links: Source Code / Demo
Created on: November 5, 2015
Made with: HTML, SCSS, JS
23. 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)
Links: Source Code / Demo
Created on: November 20, 2013
Made with: HTML, CSS, JS
More Awesome Lists:
Share: