Author: | marknorrapscm |
---|---|
Views Total: | 4,372 views |
Official Page: | Go to website |
Last Update: | October 15, 2020 |
License: | MIT |
Preview:

Description:
number-rollup is an ES6 library to create an attractive number counter with animated counting on the webpage.
It uses requestAnimationFrame()
API to increment or decrement a number smoothly in a period of time. Created with performance in mind.
How to use it:
1. Install & download the library with NPM.
# NPM $ npm i number-rollup --save 2. Import the number-rollup as an ES module.
import numberRollup from "number-rollup";
3. Create a container to hold the number counter.
<div id="example"></div>
4. Initialize the number counter and determine the start/end numbers.
numberRollup({ id: "example", startNumber: 0, endNumber: 100 });
5. Determine the duration of the count animation.
numberRollup({ id: "example", startNumber: 0, endNumber: 100, duration: 500 });
6. You’re also allowed to pass the options via HTML data
attribute if have multiple counter instances on the page.
<div class="number-rollup" data-number-rollup-start="0" data-number-rollup-end="100" data-number-rollup-duration="500" </div>
numberRollup();