Best jQuery Scrolling Effects Plugins & Tutorials with Demo

    skrollr : jQuery parallax scrolling for the masses with Demo

    April 26, 2012 | Animation, Plugins, Web
    skrollr : jQuery parallax scrolling for the masses with Demo

    Parallax* scrolling lib with zero dependencies in just over 7k minified (3k gzipped). No JavaScript skills needed.Actually, skrollr is much more. It’s a full-fledged scrolling animation library. In fact, you can use it and still have no parallax scrolling at all. But calling it “parallax” is part of my ongoing effort to play buzzword bingo as often as possible. By the way, skrollr leverages HTML5 and CSS3.

    skrollr allows you to animate any CSS property of any element depending on the horizontal scrollbar position.All you need to do is define key frames for each element at certain points in top offset. Each key frame consists of one or multiple CSS properties and values.

    Read More Demo

    jQuery Effect smooth scroll with Demo

    April 16, 2012 | Animation, Web
    jQuery Effect smooth scroll with Demo

    The effect of scroll fluid is already built, according to your user settings on some browsers. It is manifested by a smooth scrolling of the webpage when you get off or ride through the mouse wheel, or the keys on your keyboard.You can generate this effect as clicking an anchor using JavaScript.

    Read More Demo

    Intriguing animate-on-scroll effect – jQuery tutorial with Demo

    April 16, 2012 | Animation, Web
    Intriguing animate-on-scroll effect - jQuery tutorial with Demo

    In this tutorial we try to recreate the intriguing scrolling effect. We’ll go for simplicity : 5 objects to animate and linear movement, no easing. The basis that opens the door for further elaboration.

    The idea is to encourage the visitor to scroll down by positioning the #separation element at the bottom of the page. We want the #separation to stay there when the window is resized but to move up when we start to scroll down.

    Read More Demo

    PageScroller : jQuery Smooth Scrolling Made Simple

    February 22, 2012 | Plugins, Web
    PageScroller : jQuery Smooth Scrolling Made Simple

    Page Scroller is a powerful JavaScript based smooth scrolling navigation system that utilizes the robust jQuery library. Created entirely with ease of use in mind, the plugin will work on any website.

    Read More Demo

    jQuery Scroll Path

    February 10, 2012 | Plugins, Web
    jQuery Scroll Path

    A jQuery plugin for defining a custom path that the browser follows when scrolling.The plugin uses canvas flavored syntax for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initating the plugin.

    Scrolling can be done with the mousewheel, up/down arrow keys and spacebar. The spacebar scrolls faster than the arrow keys, and holding shift while pressing space will scroll backwards. A custom scrollbar is also included, which allows click and drag scrolling. The scrollbar is enabled by default.

    The plugin also allows rotating the entire page, using CSS transforms. This can be done either along a path, or around the current position. In browsers without CSS transform support, all rotations are ignored, but paths are still followed. This means the plugin works with graceful degradation in all browsers.

    Read More Demo

    Scrolldeck : jQuery scrolling presentation decks plugin

    February 7, 2012 | Animation, Plugins, Slider, Web
    Scrolldeck : jQuery scrolling presentation decks plugin

    Scrolldeck a jQuery plugin for making scrolling presentation deck.After linking all the required scripts (jQuery, Scrollorama, scrollTo, easing & scrolldeck), create the slide deck on document ready event.Add animations to slides by adding the “animate-in” or “animate-build” classes to elements in your slides.

    Read More Demo

    SimplyScroll a jQuery plugin for scrolling a set of images/elements

    January 17, 2012 | Carousel, Gallery, jSON, Other API, Plugins
    simplyScroll a jQuery plugin for scrolling a set of images/elements

    simplyScroll is a jQuery plugin that can animate (scroll) a set of elements either automatically or manually, horizontally or vertically. It can also accept dynamic image input via a Flickr feed (note not full API integration) or a local JSON source. This plugin can be performance intensive, so speed and framerate are fully configureable to accomodate lower spec systems.

    Read More Demo

    Scrollorama jQuery plugin for doing cool scrolly stuff

    January 4, 2012 | Animation, Plugins, Web
    Scrollorama jQuery plugin for doing cool scrolly stuff

    Scrollorama jQuery plugin for doing cool scrolly stuff like transitions,fade in, rotate in, fly in, zoom in, parallax

    Read More Demo

    Lateral On-Scroll Sliding with jQuery

    December 6, 2011 | Animation, CSS2 / CSS3.0, Gallery
    jQuery On-Scroll Sliding

    After getting the request, we are going to show you how to create a “slide-in on scroll” jQuery effect. You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from “outside” of the page to the center when they are in the viewport. We will also add the option to move the elements in 3D space.

    The theme of today’s tutorial is going to be a timeline where we will have some circular elements on one side and the descriptions on the other. We’ll be alternating the sides to create a random look.

    Read More Demo

    jQuery Waypoints: Scroll-Based jQuery Functions

    March 27, 2011 | Animation, Menus, Plugins, Web

    Creating custom functions with jQuery based on the scroll position of the page just got a whole lot easier. Today i stumbled through an interesting jQuery plugin that i am sure many of you guys will find useful. Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

    Waypoints makes a solid base for modern UI patterns that depend on a user’s scroll position on the page.

    Read More Demo