Build Your Own Page Scrolling Effects With Roll.js
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?
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.