Best jQuery Scrolling Effects Plugins & Tutorials with Demo

    lax.js : JavaScript Plugin for awesum Scroll Effects

    lax.js : JavaScript Plugin for awesum Scroll Effects

    Lax.js  is a simple & light weight (2kb minified & zipped) vanilla javascript plugin to create smooth & beautiful animations when you scrolllll! Harness the power of the most intuitive interaction and make your websites come alive!

    ScrollDir : Leverage Vertical Scroll Direction with CSS

    ScrollDir : Leverage Vertical Scroll Direction with CSS

    ScrollDir, short for Scroll Direction, is a 0 dependency, ~1kb micro Javascript plugin to easily leverage vertical scroll direction in CSS via a data attribute.

    Features:

    • showing or hiding sticky elements based on scroll direction
    • only changing its direction attribute when scrolled a significant amount
    • ignoring small scroll movements that cause unwanted jitters

    Scenic 3D Photo Parallax with JavaScript

    Scenic 3D Photo Parallax with JavaScript

    Scenic – is a simple script that automatically animates layers of still imagery during scrolling for creating an illusion of 3D. It pans and zooms a photo to achieve a parallax effect.

    You can also use any html elements as layers like ‘div’ with text or buttons.

    For creating 3D photos you will need to break your photo into layers. You can do it easily in editors like Adobe Photoshop. When you purchase our script you also get a video tutorial about creating layers in Photoshop.

    ScrollOut : Detects Changes in Scroll

    ScrollOut : Detects Changes in Scroll

    ScrollOut detects changes in scroll for reveal, parallax, and CSS Variable effects! Use JavaScript callbacks, CSS selectors, or CSS Variables to animate elements in and out. You can even create sticky headers.

    Physics-Based Background Scroll Effects with JavaScript

    Physics-Based Background Scroll Effects with JavaScript

    This article will show you how to create nifty physics-based background scroll effects for your web pages. We’ll be using Matter.js, an excellent open-source JavaScript framework, to handle the physics for us.

    Sal.js : Lightweight Scroll Animation library

    Sal.js : Lightweight Scroll Animation library

    Sal.js is a performance focused, lightweight scroll animation library.Sal (Scroll Animation Library) is written with aim to provide performant and lightweight solution for animating elements on scroll. It’s based on the Intersection Observer, which gives amazing performance in terms of checking the element’s presence in viewport.

    jQuery Header Scroll Effect Plugin

    jQuery Header Scroll Effect Plugin

    The scroll effect header is a kind of parallax whose difference lies in the change, if parallax usually occurs because of the movement of two objects, while this is changing and moving. Obviously if the scroll header will change blur, sepia or other effects follow movement scroll.

    Features

    • Valid All HTML5
    • Valid CSS
    • Responsive
    • All Filter Scroll Effect
    • Bonus Effect Margin and Border Radius

    parallaxContent : jQuery Parallax Content Plugin

    parallaxContent : jQuery Parallax Content Plugin

    ParallaxContent is a jQuery parallax content plugin based on GSAP .

    jQuery Custom Scroller Plugin

    jQuery Custom Scroller Plugin

    The idea is to demonstrate how easily a Custom jQuery Scroller can be built.

    Motus : Scrolling Animation Library

    Motus : Scrolling Animation Library

    Motus is a animation library that mimics CSS keyframes when scrolling.