Best jQuery Scrolling Effects Plugins & Tutorials with Demo

    Smooth Scrolling Image Effects with CSS & Tweenmax

    Smooth Scrolling Image Effects with CSS & Tweenmax

    A small set of ideas on animating images and other elements while smooth scrolling a page. We’ve made a small set of effects that show how you can apply some interesting transforms to elements like images and text while scrolling the page smoothly.

    Smooth Scrolling with Inner Image Animations to a Web Page

    Smooth Scrolling with Inner Image Animations to a Web Page
    A tutorial on how to add a smooth scrolling effect to a website and also animate the images that enter the viewport.

    Tornis : JavaScript library that Watches and Respond to Browser ViewPort

    Tornis : JavaScript library that Watches and Respond to Browser ViewPort

    Taking its name from the forest watchtowers of Latvia, Tornis is a minimal JavaScript library that watches the state of your browser’s viewport, allowing you to respond whenever something changes.Tornis currently tracks state for:

    • Mouse position
    • Mouse cursor velocity
    • Viewport size
    • Scroll position
    • Scroll velocity

    Scrollpup.js : Scroll Progress Bar with Javascript

    Scrollpup.js : Scroll Progress Bar with Javascript

    Scrollpup.js is responsive and written in pure javascript and it weights around 1kb.

    Smooth Scroll Manager with JavaScript

    Smooth Scroll Manager with JavaScript

    Scroll Manager is utility class that controls smooth scroll and showing some elements by scroll event.

    Horizontal Scrolling with Animated Images

    Horizontal Scrolling with Animated Images

    A horizontal scrolling experiment with animated images made with GSAP’s TimelineMax and ScrollMagic.

    Create Smooth WebGL Transitions on Scroll using Phenomenon

    Create Smooth WebGL Transitions on Scroll using Phenomenon

    A tutorial on how to transition WebGL instances in a smooth way based on the scroll position using three.js and Phenomenon.

    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.