25 Stunning jQuery Scroll Effects (Free Code)

tornis.js + gsap to update svg filter values on scroll

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/

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

A smooth scroll animation pen for listing. Made with smooth-scrollbar.js and overscroll plugin

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.

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)

Shrink the size of the navigation bar after the user scrolls down the page. Makes use of CSS animation properties to animate the resize.

Unoptimized, test effect for a one-pager. Images copyrighted to Ivaylo Yovchev Photography ( http://ivayloyovchev.com )

A fullscreen landing cover that flies off on scroll. Uses skrollr library.

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.