25 Stunning jQuery Scroll Effects (Free Code)
Enjoy this long list of 100% free jQuery scroll effect examples and code. They will enhance your website for sure.
1. Zoom Hero Image On Scroll
Author: Jason D'Oyley (jdfd)
Links: Source Code / Demo
Created on: November 13, 2018
Made with: HTML, CSS, JS
2. JQuery Scroll - Scale Hero Section On Scroll
Author: Traf (traf)
Links: Source Code / Demo
Created on: August 10, 2019
Made with: HTML, CSS, JS
Tags: hero, scroll
3. Skewed One Page Scroll
Author: Nikolay Talanov (suez)
Links: Source Code / Demo
Created on: November 4, 2015
Made with: HTML, SCSS, JS
4. JQuery Scroll Effect Distortion
tornis.js + gsap to update svg filter values on scroll
Author: Adam Kuhn (cobra_winfrey)
Links: Source Code / Demo
Created on: July 31, 2019
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: tornis, gsap, greensock, svg, filters
5. One Page Scrolly Thing
Author: Joshua Ward (joshuaward)
Links: Source Code / Demo
Created on: November 10, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
6. 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. It's based on this presentation from The Guardian's design team: https://design.theguardian.com/
Author: Brian Haferkamp (brianhaferkamp)
Created on: July 29, 2019
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: scrolling, css-grid, css, jquery
7. Animated JQuery Scroll
Author: Recreatorus (Recreatorus)
Links: Source Code / Demo
Created on: November 17, 2018
Made with: HTML, SCSS, JS
8. Show Elements On Scroll
Using JQuery and SCSS to bring to the screen elements gradually.
Author: Jesus (tateishi-e)
Links: Source Code / Demo
Created on: August 29, 2018
Made with: HTML, SCSS, JS
Tags: cpc-teach-design, codepenchallenge, scroll, animate
9. Scroll List Animation With JQuery
A smooth scroll animation pen for listing. Made with smooth-scrollbar.js and overscroll plugin
Author: Muhammed Erdem (JavaScriptJunkie)
Links: Source Code / Demo
Created on: November 6, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: scroll, smooth, animation, list, scroll card
10. Image Mask Reveal Animation V.2
Author: Fabio Ottaviani (supah)
Links: Source Code / Demo
Created on: June 18, 2018
Made with: HTML, SCSS, JS
Tags: scroll, mask, animation, clipping-mask, smoke
11. Fresh
Author: Daniel Givens (danielgivens)
Links: Source Code / Demo
Created on: September 4, 2017
Made with: HTML, SCSS, JS
12. Smooth Page Scrolling In JQuery
Author: Chris Coyier (chriscoyier)
Links: Source Code / Demo
Created on: October 29, 2016
Made with: HTML, CSS, JS
13. 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.
Author: Nathan Taylor (nathantaylor)
Links: Source Code / Demo
Created on: August 28, 2017
Made with: HTML, SCSS, Babel
Tags: scroll, momentum, effect, fixed, smooth
14. JQuery Navigation Scroll Animation
Author: Julián Glez (sk8walker)
Links: Source Code / Demo
Created on: April 19, 2019
Made with: HTML, CSS, JS
Tags: scroll-spy, bootstrap, flexbox, cover page
15. On Scroll Animation Jquery
Author: Husam Alrubaye (husamui)
Links: Source Code / Demo
Created on: March 28, 2014
Made with: HTML, CSS, JS
Tags: scroll, animation, jquery, parallax, css3
16. Full Page Vertical Slider
Author: Pamcy (pamcy)
Links: Source Code / Demo
Created on: January 30, 2019
Made with: HTML, SCSS, JS
Tags: vertical slider, vertical-carousel, scroll-indicator, smooth-scrolling, page scroll
17. Page Scroll Effects
Page Scroll Effect Examples with (varients for animation styles and an option for enabling/disabling scroll jacking) (Forked Off from the demo on http://www.codyhouse.co)
Author: Steve (slstudios)
Links: Source Code / Demo
Created on: June 11, 2015
Made with: HTML, CSS, JS
Tags: page scroll, page scroll effect, scroll-animation
18. Change Navigation Bar Size On Scroll
Shrink the size of the navigation bar after the user scrolls down the page. Makes use of CSS animation properties to animate the resize.
Author: akram (arxaa)
Links: Source Code / Demo
Created on: February 7, 2018
Made with: HTML, CSS, JS
Tags: change nav bar size
19. On Scroll Fade In Reveal Animations With CSS3 & JQuery (From Github Co.)
Author: Surjith (surjithctly)
Links: Source Code / Demo
Created on: September 1, 2017
Made with: HTML, CSS, JS
20. One Page Website Scrolling Effect
Unoptimized, test effect for a one-pager. Images copyrighted to Ivaylo Yovchev Photography ( http://ivayloyovchev.com )
Author: Chrysto (bassta)
Links: Source Code / Demo
Created on: June 1, 2014
Made with: HTML, CSS, JS
Tags: one-page, scroll-animation, fixed
21. Scroll Animations
Author: Bramus (bramus)
Links: Source Code / Demo
Made with: HTML, CSS, JS
22. Simple Landing Page Cover
A fullscreen landing cover that flies off on scroll. Uses skrollr library.
Author: Ovi (Ovoce)
Links: Source Code / Demo
Created on: September 3, 2014
Made with: Pug, Stylus, JS
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: landing, fullscreen, skrollr
23. Trigger A CSS Animation On Scroll
Forked from Benoît Boucart's Pen Trigger a CSS animation on scroll. Forked from Benoît Boucart's Pen Trigger a CSS animation on scroll.
Author: Peter McGriff (pmcgriff)
Links: Source Code / Demo
Created on: November 5, 2015
Made with: HTML, SCSS, JS
Tags: css, jquery, javascript, animation
More Awesome Lists:
Share: