In this article, we have collected 24 examples of CSS scroll effects. CSS Scroll Effects are an easy way to add some cool effects to your website without having to write code.
These CSS Scroll Effects Collections are perfect for creating unique designs for websites.
01 of 24Horizontal Scroll Sections
About the Code
If you’re looking to add horizontal scroll sections to your website, you can use SCSS to easily achieve this effect. By adding a few lines of code, you can create horizontal CSS scroll effect sections that are responsive and look great on all devices.
02 of 24ScrollPane
About the Code
Mouse wheel event > Vertical Scroll + Slider with Horizontal CSS Scroll Effects + Split Screen
Useful Links: More info | Live Demo
Dependency: jquery jquery.mousewheel TweenMax ScrollToPlugin
03 of 24Horizontal scroll, drag, transition, bounce
About the Code
Using CSS and JavaScript, you can create a horizontal scroll, drag, transition, and bounce effect.
Useful Links: More info | Live Demo
Dependency: TweenMax imagesloaded.pkgd
04 of 24Horizontal Scroll with GSAP and ScrollMagic
Author
- Naila Ahmad
Made with
- HTML / SCSS / JS
Created on
- JANUARY 30, 2017
Updated on
- JANUARY 31, 2017
About the Code
Simple Horizontal Scroll with GSAP and Scrollmagic.
Useful Links: More info | Live Demo
Dependency: jquery TweenMax ScrollMagic animation.gsap debug.addIndicators
05 of 24Pure CSS horizontal scroll tentative
Author
- Mehdi
Made with
- HTML / SCSS
Created on
- APRIL 9, 2016
Updated on
- APRIL 9, 2016
of 24One page scroll navigation with css transforms
Author
- Nikolay Talanov
Made with
- HTML / SCSS / JS
Created on
- SEPTEMBER 13, 2014
Updated on
- OCTOBER 30, 2017
About the Code
If you’re looking for a quick and easy way to add one-page CSS scroll effect navigation to your website, CSS transforms are the way to go. In this demo, we’ll show you how to use CSS transforms to create a one-page scroll navigation effect, and how to add some extra polish with CSS transitions.
Useful Links: More info | Live Demo
Dependency: –
07 of 24Skewed One-Page Scroll
Author
- Nikolay Talanov
Made with
- HTML / SCSS / JS
Created on
- NOVEMBER 4, 2015
Updated on
- NOVEMBER 4, 2015
08 of 24Change Background Gradient on Scrolling
Author
- Mike
Made with
- HTML / SCSS
Created on
- JUNE 27, 2018
Updated on
- July 8, 2018
About the Code
When building websites, there are often times when you want to change the background gradient on the scroll. This can be a great way to add some visual interest to your site and make it more engaging for users. CSS Scroll effect Indicator technique to make a background gradient that adapts to scroll position. CSS animation on scroll without javascript
Useful Links: More info | Live Demo
Dependency: –
09 of 24Intersection Observer CSS Scroll Effect
Author
- Emily Hayman
Made with
- HTML / SCSS / JS
Created on
- OCTOBER 14, 2018
Updated on
- OCTOBER 14, 2018
About the Code
If you’re looking for a way to add some extra pizzazz to your website, you might want to try using CSS variables to create a parallax effect CSS. Leveraging Intersection Observer along with CSS variables to create an interesting scroll effect.
Useful Links: More info | Live Demo
Dependency: –
10 of 24Full page header scroll effect
Author
- Ana Tudor
Made with
- HTML / SCSS / JS
Created on
- OCTOBER 7, 2014
Updated on
- OCTOBER 7, 2014
11 of 24Highlight on scroll with CSS-variables
12 of 24Scroll controlled SVG animation
Author
- Manuel Cárdenas
Made with
- HTML / CSS / JS
Created on
- JUNE 7, 2016
Updated on
- JUNE 8, 2016
About the Code
SVG drawing with scroll effect made with scroll magic and GSAP (Green Sock), two jQuery plugins.
Useful Links: More info | Live Demo
Dependency: jquery TweenMax ScrollMagic debug.addIndicators animation.gsap
13 of 24Scroll Based Animation
Author
- lmgonzalves
Made with
- HTML / SCSS / JS
Created on
- APRIL 22, 2019
Updated on
- APRIL 22, 2019
About the Code
Scroll-based animations can add a lot of depth and engagement to a website or web application. They can also be used to help guide a user through a task or process. We have created scroll-based gallery animation effects using SCSS and JavaScript.
Useful Links: More info | Live Demo
Dependency: –
14 of 24RGB Channel Split Scroll Effect
15 of 24Box CSS Scroll Effect
Author
- Vivek
Made with
- Pug / SCSS / JS
Created on
- JUNE 29, 2020
Updated on
- JULY 1, 2020
About the Code
The box scroll effect is a popular technique used in web design. It can be used to create a variety of effects, such as a scrolling animation or a static image.
Useful Links: More info | Live Demo
Dependency: all jquery ScrollTrigger gsap-latest-beta
16 of 24Floaty Bubbles on Scroll
17 of 24Horizontal Infinite “Out of Synch” Scroll Effect
Author
- Julien Lejeune
Made with
- HTML / SCSS / JS
Created on
- MAY 11, 2017
Updated on
- MAY 11, 2017
18 of 24Horizontal Scroll effect
19 of 24Expanding Diagonal Background on Scroll
Author
- Derek Palladino
Made with
- HTML / SCSS / JS
Created on
- APRIL 1, 2016
Updated on
- July 28, 2016
20 of 24Fade Effect on CSS Scroll
Author
- foleyatwork
Made with
- HTML / Sass / JS
Created on
- MAY 16, 2014
Updated on
- NOVEMBER 3, 2015
Discussion about this post