20 Best jQuery Scroll Effects
Best collection of free jQuery scroll effect code examples.
Collection
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Return to Top Arrow
Author: rdallaire
Links: Demo and code
Made with: HTML / CSS / JS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
