26 jQuery Scroll Effects

About a code

jQuery Different Scroll Speeds

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

Responsive: no

Dependencies: -

About a code

One Page Scroll with Depth Effect

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

Responsive: yes

Dependencies: jquery.easing.js

About a code

Text Circle Reveal on Scroll

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

Responsive: yes

Dependencies: -

About a code

Box Scroll Effect

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

Responsive: yes

Dependencies: font-awesome.css, scrollTrigger.js, gsap.js

About a code

Rocket Back to Top Button

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

Responsive: yes

Dependencies: font-awesome.css

About a code

Flavortown Scrolltrigger

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

Responsive: yes

Dependencies: gsap.js, scrollTrigger.js, splitting.js

About a code

Horizontal Scroll Text

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

Responsive: yes

Dependencies: -

About a code

Triangle Scroll Morph

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

Responsive: yes

Dependencies: tweenmax.js, morphsvgplugin.js

About a code

Scale Hero Section on Scroll

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

Responsive: yes

Dependencies: -

About a code

Scroll Distortion

Tornis.js + GSAP to update SVG filter values on scroll.

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

Responsive: no

Dependencies: tornis.js, tweenmax.js

About a code

Unique Scrolling Presentation

This unique scrolling presentation uses CSS Grid and a little bit of JavaScript to change the fixed image as the user scrolls the page.

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

Responsive: yes

Dependencies: -

About a code

All Side Scroll

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

Responsive: yes

Dependencies: font-awesome.css

About a code

Scrolling Articles Card

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

Responsive: yes

Dependencies: smooth-scrollbar.js, overscroll.js

About a code

Zoom Hero Image On Scroll

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

Responsive: yes

Dependencies: -

About a code

One Page Scrolly Thing

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

Responsive: yes

Dependencies: -

About a code

Scroll List Animation

A smooth scroll animation example for listing. Made with smooth-scrollbar.js and overscroll plugin.

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

Responsive: yes

Dependencies: smooth-scrollbar.js, overscroll.js

About a code

Show Elements on Scroll

Using jQuery and SCSS to bring to the screen elements gradually.

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

Responsive: yes

Dependencies: -

About a code

Samurai - ScrollMagic & TweenMax

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

Responsive: yes

Dependencies: tweenmax.js, scrollmagic.js

About a code

Image Mask Reveal Animation

Scroll down effect in jQuery.

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

Responsive: yes

Dependencies: -

About a code

Horizontal Scroll with GSAP and ScrollMagic

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

Responsive: yes

Dependencies: bootstrap.css, tweenmax.js, scrollmagic.js

About a code

jQuery Scroll Effect for Text

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

Responsive: yes

Dependencies: tweenmax.js, smooth-scrollbar.js

About a code

Momentum Scroll Fixed Element

Often fixed elements can feel a bit unnatural. I wanted to give a bit more weight to the floating object. I tried to capture the momentum feeling of natural browser scrolling. This also doesn't interfere with the default page scroll so there is no 'scroll jacking' going on here.

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

Responsive: yes

Dependencies: -

About a code

Smooth Page Scrolling in jQuery

You change the :focus style. But the fact that the blue box happens at all is very good for accessibility.

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

Responsive: yes

Dependencies: -

About a code

Skewed One Page Scroll

Just scroll down.

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

Responsive: yes

Dependencies: -

About a code

Scroll Effect

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

Responsive: yes

Dependencies: -

About a code

Scrolling Wave Effect on Border

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

Responsive: yes

Dependencies: -

About a code

Return to Top Arrow

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

Responsive: yes

Dependencies: -