Build Your Own Page Scrolling Effects With Roll.js

You can find dozens of scrolling libraries all over a web. Most are created in JavaScript and have their possess effects we can restyle for singular page layouts, on-scroll animations, and so most more.

But what about coding your possess scrolling effects? Or what if we only wish a elementary approach of tracking how distant down a page a user has scrolled?

Roll.js is a library you’re looking for. This open source book is crazy tiny and super easy to use. You can get this operative with a few lines of JavaScript. And best of all it doesn’t force we to perform anything specific, though rather gives we a tools to emanate your possess tradition scrolling features.

roll singlepage scriptroll singlepage script

The idea of this library is to assistance developers structure their scrolling effects though most effort.

If we take a demeanour during a main GitHub repo you’ll find a whole setup beam with a few instance snippets. You can run functions to call how distant a user scrolls, or to opposite “panes” on a page.

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

With a singular duty call we can lift information with any corkscrew that includes:

  • Total page steps(if applicable).
  • Total % corkscrew down page.
  • Current position on page in pixels.
  • Total viewport tallness formed on device size.

This also works with burst links that move users down (or up) to certain tools of a page.

But we can find a lot of these facilities in other libraries as well. What creates Roll.js so special?

Part of it is a syntax, though a large seller here is a sum library distance of 8KB when minified. That’s flattering damn tiny for such a minute scrolling library!

javascript scrolling libraryjavascript scrolling library

You can see how this works on a main demo page and we can even download a Roll.js source formula to puncture into those demos yourself.

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

But if we have any questions, suggestions, or wanna share your interjection for a overwhelming library, we can fire a summary over to a creator @williamngan.

Add Comment