Collection
Post cover
Created 5 month back

20 Best jQuery Scroll Effects

Best collection of free jQuery scroll effect code examples.

Unique Scrolling Presentation

Author: Brian Haferkamp

Links: demo and code

Made with: HTML (Pug) / CSS (Sass) / JS

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

Rocket Back to Top Button

Author: Housamz

Links: demo and code

Made with: HTML / CSS / JS

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

Responsive: yes

Dependencies: font-awesome.css

Skewed One Page Scroll

Author: Nikolay Talanov

Links: Demo and code

Made with: HTML / CSS (SCSS) / JS

Just scroll down.

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

Responsive: yes

Flavortown Scrolltrigger

Author: Adam Kuhn

Links: demo and code

Made with: HTML (Haml) / CSS (SCSS) / JS

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

Responsive: yes

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

Momentum Scroll Fixed Element

Author: Nathan Taylor

Links: Demo and code

Made with: HTML / CSS (SCSS) / JS (Babel)

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

Image Mask Reveal Animation

Author: Fabio Ottaviani

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Scroll down effect in jQuery.

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

Responsive: yes

Scroll Distortion

Author: Adam Kuhn

Links: demo and code

Made with: HTML (Haml) / CSS (SCSS) / JS

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

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

Dependencies: tornis.js, tweenmax.js

Scroll List Animation

Author: Muhammed Erdem

Links: Demo and code

Made with: HTML (Pug) / CSS (SCSS) / JS

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

Triangle Scroll Morph

Author: Geoff Ellerby

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Responsive: yes

Dependencies: tweenmax.js, morphsvgplugin.js

jQuery Different Scroll Speeds

Author: Mehul Rojasara

Links: demo and code

Made with: HTML / CSS (Sass) / JS

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

Text Circle Reveal on Scroll

Author: Ivan Grozdic

Links: demo and code

Made with: HTML / CSS / JS

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

Responsive: yes

Zoom Hero Image On Scroll

Author: Jason D'Oyley

Links: demo and code

Made with: HTML / CSS / JS

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

Responsive: yes

Return to Top Arrow

Author: rdallaire

Links: Demo and code

Made with: HTML / CSS / JS

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

Responsive: yes

All Side Scroll

Author: Aman Agarwal; January 30, 2019

Links: demo and code

Made with: HTML / CSS / JS

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

Responsive: yes

Dependencies: font-awesome.css

Smooth Page Scrolling in jQuery

Author: Chris Coyier

Links: Demo and code

Made with: HTML / CSS / JS

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

Show Elements on Scroll

Author: Jesus

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

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

Responsive: yes

One Page Scrolly Thing

Author: Joshua Ward

Links: Demo and code

Made with: HTML (Pug) / CSS (SCSS) / JS

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

Responsive: yes

Scrolling Articles Card

Author: Recreatorus; November 17, 2018

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Responsive: yes

Dependencies: smooth-scrollbar.js, overscroll.js

jQuery Scroll Effect for Text

Author: Daniel Givens

Links: Demo and code

Made with: HTML / CSS (SCSS) / JS

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

Responsive: yes

Dependencies: tweenmax.js, smooth-scrollbar.js

Scale Hero Section on Scroll

Author: Traf

Links: demo and code

Made with: HTML / CSS / JS

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

Responsive: yes

Box Scroll Effect

Author: Vivek

Links: demo and code

Made with: HTML (Pug) / CSS (SCSS) / JS (Babel)

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

Responsive: yes

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

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback