Build Your Own Page Scrolling Effects With Roll.js
You can find dozens of scrolling libraries all over the web. Most are written in JavaScript and have their own effects you can restyle for single page layouts, on-scroll animations, and so much more.
But what about coding your own scrolling effects? Or what if you just want a simple way of tracking how far down the page a user has scrolled?
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.
JavaScript Libraries for Cool Scrolling Effects
A website design comes to life with well-executed animation. If you're looking for the proper libraries to add... Read more
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.
But if you have any questions, suggestions, or wanna share your thanks for the awesome library, you can shoot a message over to the creator @williamngan.