Build Your Own Page Scrolling Effects With .js

Written by Sarmad Gardezi March 31, 2018

Roll.js is the library you’re looking for. This open source script is crazy small and super easy to use. You can get this working with a few lines of JavaScript. And best of all it doesn’t force you to perform anything specific, but rather gives you the tools to create your own custom scrolling features.

The goal of this library is to help developers structure their scrolling effects without much effort.

If you take a look at the main GitHub repo you’ll find a whole setup guide with a few example snippets. You can run functions to call how far the user scrolls, or to different “panes” on the page.

These work best on single-page layouts but you can use Roll.js for so much.

With a single function call you can pull data with each scroll that includes:

  • Total page steps(if applicable).
  • Total % scrolled down page.
  • Current position on page in pixels.
  • Total viewport height based on device size.

This also works with jump links that bring users down (or up) to certain parts of the page.

But you can find a lot of these features in other libraries as well. What makes Roll.js so special?

Part of it is the syntax, but the big seller here is the total library size of 8KB when minified. That’s pretty darn small for such a detailed scrolling library!

You can see how this works on the main demo page and you can even download the Roll.js source code to dig into those demos yourself.

Everything from the live demos and the raw library files can be pulled from GitHub and they’re super easy to work with.

 


Free Online Image Hosting

Host your Images Online for free & use them on Website Blogs and Social Media.

Host Image Now Featured
Online Dictator

Convert your Speech into Text. You can either copy, Download or Share it Online for free.

Try it Now Popular
My First Tweet

Find first tweet on Twitter and retweet it to amaze people.

Lets Go! Trending

           
           

Subscribe to my Email Newsletter

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 26,908 other subscribers
           
       
Custom Support

I build bespoke solutions that use the capabilities and the features of Google Apps for automating business processes and driving business productivity.

or send me a message via Facebook Messenger