Build Your Own Page Scrolling Effects With Roll.js

You can find dozens ofscrolling 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.

Read Also: JavaScript Libraries for Cool Scrolling Effects

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 onsingle-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 .

稿源:Hongkiat (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Build Your Own Page Scrolling Effects With Roll.js

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录