November 27, 2019
Collection of free jQuery scroll effect code examples.
CSS Scroll Effects
jQuery Parallax
About a code
Scale Hero Section on Scroll
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
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
July 29, 2019
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
November 17, 2018
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
November 13, 2018
About a code
Zoom Hero Image On Scroll
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Author
Joshua Ward
November 11, 2018
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
November 6, 2018
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
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
June 18, 2018
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
September 4, 2017
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
August 29, 2017
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
October 29, 2016
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
November 4, 2015
About a code
Skewed One Page Scroll
Just scroll down.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js