Best jQuery Scrolling Effects Plugins & Tutorials with Demo

    ScrollTie : jQuery Plugin that ties CSS property to user scroll

    ScrollTie : jQuery Plugin that ties CSS property to user scroll

    This jQuery plugin is useful for creating parallax motion or similar effects in which a CSS property needs to be incremented on user scroll.

    esKju jQuery ScrollFlow Plugin

    esKju jQuery ScrollFlow Plugin

    Enhance your website by fancy effects based on the user’s scroll index. Pop-in, pop-out, sliding, sticky notes and much more. The plugin supports mobile devices and eldered browsers. It was built using the jQuery library.

    Features:

    • Eased animations for incremental mouse scroll-wheels
    • Adds fancy effects to your homepage
    • Customizable trough settings and CSS
    • Highly compatible
    • Highly customizable
    • Uses CSS3 transitions by default

    Fixed Navigation Transition with CSS3 & jQuery

    Fixed Navigation Transition with CSS3 & jQuery

    Fixed headers are a must for long pages and menus that need to be seen all the time. The transition between an inline menu and a fixed menu is an added effect that really makes your navigation stand out. I have made two different transition effects: A flip effect and an arrow ribbon effect.

    Vivus.js : JS library to make Drawing Animation on SVG

    Vivus.js : JS library to make Drawing Animation on SVG

    Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like.

    jQuery FancyIndex Plugin

    jQuery FancyIndex Plugin

    Nowadays almost every “fresh” page looks the (s)hame: One page, very content, much scroll. So even though you really hate usability, enhance your design patters by using customer-orientated plugins like this. It was built using the jQuery library.

    Features:

    • Using the directory-function upgrades the user’s experience
    • Customizable trough settings and CSS
    • Highly compatible
    • Highly customizable
    • Uses CSS3 transitions by default

    ahRelax : JavaScript Scroll based Parallax Animations

    ahRelax : JavaScript Scroll based Parallax Animations

    Experimental lightweight JS script to facilitate quick scroll based animations.

    jQuery 3D Fold Scroll Animation

    jQuery 3D Fold Scroll Animation

    Responsive 3D Fold Animation on Scroll a jQuery plugin.

    Story Tale : jQuery CSS3 Animation on Scroll

    Story Tale : jQuery CSS3 Animation on Scroll

    CSS 3 Animations Triggered on Scroll, but with a Twist of a Story.

    Midnight.js : jQuery plugin to Switch Fixed Headers on the fly

    Midnight.js : jQuery plugin to Switch Fixed Headers on the fly

    A jQuery plugin that switches between multiple header designs as you scroll, so you always have a header that looks great with the content below it.

    pagePiling.js : jQuery Create an Scrolling Stack of Pages

    pagePiling.js : jQuery Create an Scrolling Stack of Pages

    A new way to create a single scrolling page in which sections are piled one over another creating an original effect to present the information.This jQuery plugin creates a stack of pages accessible by scrolling. Sections will be presented one under another producing a cascade effect when scrolling.

    pagePiling.js was designed to run also in old browsers  (IE >=8, Opera 12…) and it also includes touch detection to work in the same way in touch devices.