Number Rollup is a smooth rising/falling number animations library to create an attractive number counter with moving counting on a webpage.
Some browsers have options that implement anti-fingerprint technologies that drastically reduce the millisecond resolution of the new date () and performance. now (). These options are not enabled by default in Firefox (privacy.resistFingerprinting) or Chrome, but if they are, the animation will not run smoothly.
How to make use of it:
1. Install & download the library with NPM.
# NPM $ npm i number-rollup --save
Import the number-rollup as an ES module.
import numberRollup from "number-rollup";
2. Create a container to hold the number counter.
<div id="example"></div>
3. Initialize the number counter and decide the beginning/finish numbers.
numberRollup({
id: "example",
startNumber: 0,
endNumber: 100
});4. Determine the length of the count animation.
numberRollup({
id: "example",
startNumber: 0,
endNumber: 100,
duration: 500
});5. You’re additionally allowed to move the choices by way of HTML data attribute if have a number of counter situations on the web page.
<div class="number-rollup"
data-number-rollup-start="0"
data-number-rollup-end="100"
data-number-rollup-duration="500"
</div>numberRollup();
Animated Number Counter In Vanilla JS, Rolling number counter css, number rollup Plugin/Github
See Demo And Download
Official Website(marknorrapscm): Click Here
This superior jQuery/javascript plugin is developed by marknorrapscm. For extra Advanced Usages, please go to the official website.