jQuery scroll effect code examples

Welcome to our collection of jQuery code examples! In this carefully curated compilation, we have gathered a wide array of code snippets that demonstrate the power and versatility of the jQuery library.

jQuery Different Scroll Speeds

Author:
Mehul Rojasara | January 11, 2021
Made with:
HTML / CSS (Sass) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

One Page Scroll with Depth Effect

Author:
vainsan | December 20, 2020
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.easing.js

Text Circle Reveal on Scroll

Author:
Ivan Grozdic | August 6, 2020
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Box Scroll Effect

Author:
Vivek | June 29, 2020
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 | June 25, 2020
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
font-awesome.css

Flavortown Scrolltrigger

Author:
Adam Kuhn | June 18, 2020
Made with:
HTML (Haml) / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
gsap.js, scrollTrigger.js, splitting.js

Horizontal Scroll Text

Author:
Nikola | February 18, 2020
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Triangle Scroll Morph

Author:
Geoff Ellerby | February 16, 2020
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 | August 10, 2019
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Scroll Distortion

Author:
Adam Kuhn | July 31, 2019
Made with:
HTML (Haml) / CSS (SCSS) / JS

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
tornis.js, tweenmax.js

Unique Scrolling Presentation

Author:
Brian Haferkamp | July 29, 2019
Made with:
HTML (Pug) / CSS (Sass) / JS

About a code

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

All Side Scroll

Author:
Aman Agarwal | January 30, 2019
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
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 | November 13, 2018
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

One Page Scrolly Thing

Author:
Joshua Ward | November 11, 2018
Made with:
HTML (Pug) / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Scroll List Animation

Author:
Muhammed Erdem | November 6, 2018
Made with:
HTML (Pug) / CSS (SCSS) / JS

About a code

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 | August 29, 2018
Made with:
HTML / CSS (SCSS) / JS

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Samurai - ScrollMagic & TweenMax

Author:
Freask'O | August 24, 2018
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
tweenmax.js, scrollmagic.js

Image Mask Reveal Animation

Author:
Fabio Ottaviani | June 18, 2018
Made with:
HTML / CSS (SCSS) / JS

About a code

Scroll down effect in jQuery.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Horizontal Scroll with GSAP and ScrollMagic

Author:
Alexandre Buffet | April 13, 2018
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
bootstrap.css, tweenmax.js, scrollmagic.js

jQuery Scroll Effect for Text

Author:
Daniel Givens | September 4, 2017
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 | August 29, 2017
Made with:
HTML / CSS (SCSS) / JS (Babel)

About a code

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

Smooth Page Scrolling in jQuery

Author:
Chris Coyier | October 29, 2016
Made with:
HTML / CSS / JS

About a code

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

Skewed One Page Scroll

Author:
Nikolay Talanov | November 4, 2015
Made with:
HTML / CSS (SCSS) / JS

About a code

Just scroll down.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Scroll Effect

Author:
spglco | July 7, 2015
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Scrolling Wave Effect on Border

Author:
James Dow | December 10, 2014
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Return to Top Arrow

Author:
rdallaire | September 22, 2013
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨