24 Free CSS Scroll Effect Examples

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.

Useful Links: More info | Live Demo

Dependency: jquery utils

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

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

About the Code

Simple Horizontal Scroll with GSAP and Scrollmagic.

Useful Links: More info | Live Demo

Dependency: jquery TweenMax ScrollMagic animation.gsap debug.addIndicators

About the Code

Horizontal scroll animation CSS. If you’re looking for a horizontal CSS scroll effect animation effect that can be achieved using only CSS, this demo is for you.

Useful Links: More info | Live Demo

Dependency: –

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: –

About the Code

Have you ever come across a one page scroll animation CSS website and thought to yourself, “How did they make that?” Well, wonder no more! In this demo, we created a one-page CSS scroll effect using SCSS and JavaScript.

Useful Links: More info | Live Demo

Dependency: jquery

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: –

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: –

About the Code

You can create visually appealing full-page header CSS scroll effects using SCSS and JavaScript by using this demo. This can be a great way to add some interactivity to your website and help engage your users.

Useful Links: More info | Live Demo

Dependency: –

About the Code

If you’ve ever wanted to highlight text on a web page as you scroll, you can do so relatively easily with CSS variables.

Useful Links: More info | Live Demo

Dependency: –

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

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: –

About the Code

I used blend modes to separate images out into RGB components and separate them on scroll for a cool blur effect.

Useful Links: More info | Live Demo

Dependency: jquery

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

About the Code

Scroll the page. Physics-based floaty bubbles background scroll effect.

Useful Links: More info | Live Demo

Dependency: –

About the Code

We have created a horizontal infinite scroll effect using SCSS and JavaScript. This effect can be used to create a seamless browsing experience for users on your website or web application.

Useful Links: More info | Live Demo

Dependency: jquery

About the Code

Just a note about this design, it scrolls way too fast for trackpads.

Useful Links: More info | Live Demo

Dependency: jquery

About the Code

Simple JQuery scroll effect to fill the background with the background diagonal.

Useful Links: More info | Live Demo

Dependency: –

Disclaimer: iOS Safari’s disappearing nav bar ruins everything fun as usual.

About the Code

Fade on the scroll is a great way to add subtlety and polish to your web designs. It’s a simple effect that can be achieved with just a few lines of code. And best of all, it’s easy to customize using Sass and JavaScript.

Useful Links: More info | Live Demo

Dependency: –

About the Code

With careful use of overflow: hidden and CSS 3d transforms (and a little innerHTML nonsense) we can create a compelling JavaScript scroll effect.

Useful Links: More info | Live Demo

Dependency: –

Disclaimer: Works best in Chrome.

About the Code

Animating elements in and out of the Viewport on scroll.

Useful Links: More info | Live Demo

Dependency: –

About the Code

This is a very very basic imitation of how I think waypoints works

Useful Links: More info | Live Demo

Dependency: jquery

About the Code

A lightweight full-page parallax CSS scroll effect.

Useful Links: More info | Live Demo

Dependency: lodash, jquery