Best jQuery Scrolling Effects Plugins & Tutorials with Demo

    Scrollocue : Simple autocue/teleprompter jQuery plugin

    Scrollocue : Simple autocue/teleprompter jQuery plugin

    Scrollocue is a jQuery plugin for building a simple autocue/teleprompter system, to scroll through lines of text.Walk through the autocue text with the arrows, space bar or just click.

    Starscroll : jQuery Plugin to Show Starfield on their website

    Starscroll : jQuery Plugin to Show Starfield on their website

    Create a div with purpose as your background .. activate plugin; animated or reactive as the user scrolls. The plugin automatically will fix the div so it works seemlessly.

    N.b the only css you might want to change is the z-index of your div. Also dont put anything in your starscroll div.

    Features:

    • 8-bit or 16-bit mode! (how retro do you wanna go!?)
    • Animated or reactionary to scroll
    • Multiple layers of true parallax
    • Custom colours and complexities
    • Every websites dream
    • Forces static on mobile detection

    Scrollzip : jQuery plugin to trigger action if element is Visible

    Scrollzip : jQuery plugin to trigger action if element is Visible

    This jQuery plugin is used to trigger some action if the given element is becoming visible or hidden while scrolling.

    fullPage.js : jQuery Create Beautiful Fullscreen Scrolling Websites

    fullPage.js : jQuery Create Beautiful Fullscreen Scrolling Websites

    A simple and easy to use jQuery plugin to create fullscreen scrolling websites. (also known as single page websites) It allows to create fullscren scrolling websites as well as adding some landscape sliders inside the sections of the site.

    Features:

    • Scroll within sections using they mouse wheel scroll
    • Scroll within sections and within sliders using the arrow keys and the pageUp and pageDown keys
    • Use a callback once the section has finished scrolling
    • Use touch events for mobile and tablet devices
    • Add a menu linked to to the sections
    • Resize the sections size as well as the text when resizing the browser’s window
    • Autoadjust itself to fit the current sectio/slide when resizing the browser’s window
    • Admit some options such as the scrolling easing, the background color of the slides, the scrolling speed, loop options, callbacks and the vertical align of the text within the sections

    jQuery One Page Scroll Plugin

    jQuery One Page Scroll Plugin

    Create an Apple-like one page scroll website (iPhone 5S website) with One Page Scroll plugin.One Page Scroll let you transform your website into a one page scroll website that allows users to scroll one page at a time. It is perfect for creating a website in which you want to present something to the viewers.

    Automatically generating a table of contents with a smooth scroll effect

    Automatically generating a table of contents with a smooth scroll effect

    I am writing a jQuery plugin that will automatically search for your headings and create a table of contents based on them for your blog post. We’ll also be adding a smooth scroll effect, so that when a user clicks on an entry they are brought to the right section. I know a table of contents is a bit of an unusual topic for a tutorial, but if you’re writing a help file for your product, or an FAQ it’s just as applicable. This tutorial also serves as an introduction to jQuery basics.

    AnimatedScroll.js : jQuery Smooth & Animated Document Scroll

    AnimatedScroll.js : jQuery Smooth & Animated Document Scroll

    AnimatedScroll.js  is a jQuery plugin that enables smooth, animated document scroll to a specific element, supporting native jQuery UI easings.

    Scrolltab : jQuery plugin to add Position Relative Tabs

    Scrolltab : jQuery plugin to add Position Relative Tabs

    Scrolltab is a jQuery plugin that adds tabs visually associated to their position relative to the scroll bar.

    This enables a developer to attach floating tabs to the scrollbar of the brwoser that will scroll the user to the position indicated by the tab. This tab is expandable with content within.

    jquery.arbitrary-anchor.js : jQuery Smooth Scrolling

    jquery.arbitrary-anchor.js : jQuery Smooth Scrolling

    With jquery.arbitrary-anchor.js , you can easily create useful and neat dynamic anchor scrolling by simply adding a jQuery/CSS selector after the hash (#) in your page’s URL. This plugin extends the normal anchor functionality, that is, an anchor tag with a name value attribute will still get scrolled to as normal. The same goes for an element with an ID which matches the hash. This little plugin will take care of everything else.

    AnimateScroll : jQuery Plugin for Animating Scroll

    AnimateScroll : jQuery Plugin for Animating Scroll

    AnimateScroll is a jQuery plugin which enables you to scroll to any part of the page in style by just calling the animatescroll() function with the Id or Classname of the element where you want to scroll to.

    It gives power to the user with its various options to customize the style of scrolling, scroll speed and many more. Supports more than 30 unique Scrolling Styles.