scrollReveal.js is plain vanilla JS library that allows you to reveal elements as they enter the viewport. It’s remarkable in that it’s only 3kb minified, that’s small. The range of effects you can choose are vast, and it uses natural language to define the animation you want to run. No need for CSS3 transition and a script to detect the current page position in the browser window. Use ScrollReveal and be done with it!

scrollSpeed is a lightweight jQuery extension for custom scrolling speed in modern web browsers. Supports vertical or horizontal scrolling direction, including user-defined easing. After setup, reference the scrollSpeed() method and modify the step and speed parameters to create the desired scrolling effect. The step parameter defaults to 100 units, while speed defaults to 800 milliseconds; custom easing is optional.

Illustration by akselkreis

If you are looking to add a little flair to your anchor scrolling, this plugin can help. AnchorScroll.js is a lightweight, easy-to-use jQuery plugin for smooth scrolling to anchor targets that can also add classes to elements on scroll events. You can add blur effects, bounce effects or even text to let your user know you are scrolling to the right spot.

Users love to use the mouse wheel for scrolling functionality and Horwheel takes control of that feature with the ability to scroll horizontally. (This can be a great features for websites using some parallax scrolling techniques or other non-traditional navigation.)

The plugin is rather simple and easy to install and use. You need to require Horwheel and define a wrapper, then exclude the plugin function with the wrapper parameter in your code. You can use it with or without components, based on your preferred workflow.

The Horwheel plugin works with plenty of different browsers including Chrome for Windows and Mac, Firefox for Windows and Mac, Opera for Windows and Mac, Safari for Windows and Mac and Internet Explorer 7, 8 and 9.

The Scrolling Progress plugin indicates scroll progress of a content section, as you would expect from the name.

The plugin is designed using a two-part structure with a content area and progress bars. The animation changes based on your progression through a webpage.

It works because each section of the content has a unique identifier, which helps calculate the percentage. Each bar then has a link to smooth scroll to that section.

Progress bars are set with a fixed positioned as you scroll down the page. The progress bars in this plugin have a background color and a span element with its width animated to simulate the progress bar.

There are not a lot of preset options here, but you can alter the CSS as you see fit.

There’s a bit of code to process when using this plugin but once you get it installed, the result is quite nifty and has potential for use for a number of different types of websites. (All of the code is included in the demo so you can take a look to see if this is something you feel comfortable with before installation.)

ScrollAppear is a powerful and agile tool that makes content appear on scroll (or on other event triggers). It is a jQuery-based plugin.

ScrollAppear expands basic scroll function in a variety of ways to include the following:

• History of what has been shown as result of the plugin
• Ability to revert to a part of or all of what has been shown
• Ability to directly show elements without the user having to trigger a monitored event
• Ability to prevent mass scroll/appear of content by setting a timeout between events (in a similar fashion to hoverIntent)
• Set a pixel offset for your trigger element
• Set the number of event triggers to be performed before the event is unbound

This plugin is JSLint and JSHint compliant and comes with extensive documentation for ease of use.

ScrollAppear also includes a quite extensive parameter list with AddClass, Callback, DelayEffect, EffectDuration, ElementEffect, ElementsToShow, NumberofSccrolls, GatherAfterTrigger, PixelOffset, Timeout, TriggerIntent and TriggerType.

Crossfade is a tiny jQuery plugin for crossfading images on page scroll. The end result is a high-impact scroll feature that can add a lot of visual interest to a website design without slowing it down.

This plugin is super-small — only 3kb. You can install using Bower and then initialize.

There are a few technical things you might want to know about this plugin:

• It preloads the start and ending images.
• It generates a <canvas> element and appends it to the element. The canvas is automatically set to cover its parent, via absolute positioning.
• The starting and ending images are drawn into the <canvas> and, depending on the position of the element in the viewport, superimposed on top of one another.
• Images are redrawn using window.requestAnimationFrame, allowing for exceptionally performant rendering. Browsers that do not support window.requestAnimationFrame will fall back to a timeout loop.

On install, you have options to adjust the start and end points of the fading animation, threshold and speed of the fade and default background position of images as the plugin does its magic.

The scroll up bar jQuery plugin hides the top bar when scrolling down, and shows it when scrolling up. It’s especially useful on mobile interfaces to save space. The effect is similar to what using sticky navigation that later hides during the scrolling process.

There are multiple uses for the plugin — simple, bar with offset and viewport callbacks. All are available for preview and usage in the demo.

There are a handful of available options to work with. You can pass callback functions in initialization to handle bar visibility events.

• enterViewport – when the bar enters the viewport
• fullyEnterViewport – when the bar is completely in the viewport
• exitViewport – when the bar completely leaves the viewport
• partiallyExitViewport – when the bar goes from being fully in the viewport to only partially

Install is simple with a script and call or installation using Bower. The plugin is also supported by all major browsers including Chrome, Firefox, Safari, Opera and Internet Explorer.

Create divided multi-scrolling pages with two vertical scrolling layouts using multiScroll. The end result is a trendy multi-scrolling effect that works in the idea of parallax movements.

And it’s easy to use. You only have to add a few lines of code to your markup to make this multi-column scroll tool work.

Options included with this plugin include orientation and alignment, scrolling speed and color. You can also select different anchor points, easing, looping, padding, keyboard/mouse/touch sensitivity and menu options.

This plugin is designed to work in pretty much any environment — desktop, tablet or mobile — and works on modern browsers including some older ones such as Internet Explorer 8 and Opera 12. It works with and without CSS3 support.

There are a few sites using this plugin so you can see it in action (see the documentation for details) and the developer is open to working with you on customizations for a fee, if there is something more you want this tool to do specifically for your site. (Changes and other suggestions for improvement are also welcomed.)

Want to add a little magic to your scroll interactions? ScrollMagic is the go to scroll effect plugin. It essentially allows you to turn your scrollbar into a playback scrubber on an animation and do some pinning/syncing/parallax effects and powerful animations with GreenSock (https://greensock.com/docs/#/HTML5/).

Like with anything this powerful, there is a bit of a learning curve, but its well worth learning.

This plugin is an evolution of Super Scrollorama by John Polacek: (http://johnpolacek.github.io/sup…).

Floating/sticky table header plugin that supports window and overflow scrolling.

Beautiful scroll driven navigation lists with stacking headers that remain visible at all times.

A simple autocue/teleprompter system, to scroll through lines of text.

Displays nav bar based on scroll direction.