© 2013 - 2020, Geopay.me Inc

12 JQuery Scroll Effects

• jQuery, Scroll

3 min. (541 words)

12-jquery-scroll-effects
Collection of free jQuery scroll effect examples.

Collection of free jQuery scroll effect code examples.

  1. CSS Scroll Effects
  2. jQuery Parallax


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: jquery.js

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: jquery.js, 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: jquery.js

Author

  • Recreatorus

Made with

  • HTML / CSS (SCSS) / JS

About a code

Scrolling Articles Card

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

Responsive: yes

Dependencies: jquery.js, 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: jquery.js

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: jquery.js

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: jquery.js, 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: jquery.js

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: jquery.js

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: jquery.js, 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: jquery.js

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: jquery.js

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: jquery.js