Collection of free jQuery scroll effect code examples. Update of November 2019 collection. 8 new items.

Related Articles:

  1. CSS Scroll Effects
  2. jQuery Parallax

Author

  • Mehul Rojasara

Made with

  • HTML / CSS (Sass) / JS

About a code

jQuery Different Scroll Speeds

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

Responsive: no

Dependencies: -

Author

  • Ivan Grozdic

Made with

  • HTML / CSS / JS

About a code

Text Circle Reveal on Scroll

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

Responsive: yes

Dependencies: -

Author

  • Vivek

Made with

  • HTML (Pug) / CSS (SCSS) / JS (Babel)

About a code

Box Scroll Effect

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

Responsive: yes

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

Author

  • Housamz

Made with

  • HTML / CSS / JS

About a code

Rocket Back to Top Button

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

Responsive: yes

Dependencies: font-awesome.css

Author

  • Adam Kuhn

Made with

  • HTML (Haml) / CSS (SCSS) / JS

About a code

Flavortown Scrolltrigger

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

Responsive: yes

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

Author

  • Geoff Ellerby

Made with

  • HTML / CSS (SCSS) / JS

About a code

Triangle Scroll Morph

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

Responsive: yes

Dependencies: tweenmax.js, morphsvgplugin.js

Author

  • Traf

Made with

  • HTML / CSS / JS

About a code

Scale Hero Section on Scroll

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

Responsive: yes

Dependencies: -

Author

  • Adam Kuhn

Made with

  • HTML (Haml) / CSS (SCSS) / JS

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

Author

  • Brian Haferkamp

Made with

  • HTML (Pug) / CSS (Sass) / 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: -

Author

  • Aman Agarwal

Made with

  • HTML / CSS / JS

About a code

All Side Scroll

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

Responsive: yes

Dependencies: font-awesome.css

Author

  • Recreatorus

Made with

  • HTML / CSS (SCSS) / JS

About a code

Scrolling Articles Card

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

Responsive: yes

Dependencies: smooth-scrollbar.js, overscroll.js

Author

  • Jason D'Oyley

Made with

  • HTML / CSS / JS

About a code

Zoom Hero Image On Scroll

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

Responsive: yes

Dependencies: -

Author

  • Joshua Ward

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

One Page Scrolly Thing

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

Responsive: yes

Dependencies: -

Author

  • Muhammed Erdem

Made with

  • HTML (Pug) / CSS (SCSS) / JS

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

Author

  • Jesus

Made with

  • HTML / CSS (SCSS) / 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: -

Author

  • Fabio Ottaviani

Made with

  • HTML / CSS (SCSS) / JS

About a code

Image Mask Reveal Animation

Scroll down effect in jQuery.

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

Responsive: yes

Dependencies: -

Author

  • Daniel Givens

Made with

  • HTML / CSS (SCSS) / JS

About a code

jQuery Scroll Effect for Text

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

Responsive: yes

Dependencies: tweenmax.js, smooth-scrollbar.js

Author

  • Nathan Taylor

Made with

  • HTML / CSS (SCSS) / JS (Babel)

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

Author

  • Chris Coyier

Made with

  • HTML / CSS / JS

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

Author

  • Nikolay Talanov

Made with

  • HTML / CSS (SCSS) / JS

About a code

Skewed One Page Scroll

Just scroll down.

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

Responsive: yes

Dependencies: -

Author

  • rdallaire

Made with

  • HTML / CSS / JS

About a code

Return to Top Arrow

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

Responsive: yes

Dependencies: -