Author: | josecoelhomelo |
---|---|
Views Total: | 588 views |
Official Page: | Go to website |
Last Update: | February 2, 2023 |
License: | MIT |
Preview:

Description:
An increasing counter JavaScript plugin for animating a number or increasing the width of an element as it becomes visible in the viewport.
How to use it:
1. Download and insert the counter.min.js script into the document.
<script src="./counter.min.js"></script>
2. Count up a number in an animated way.
<p id="example" data-counter-target="1000"> 10 </p>
new Counter('#example');
3. Create a ‘bar’ style counter that increases the width of a DIV element at a given speed.
<div id="example"></div>
new Counter('#example', { target: 100, type: 'bar', });
4. Available counter options.
new Counter('#example', { origin: 0, target: 100, type: 'numeric', // 'numeric', 'bar', 'both' duration: 1500, suffix: null, classes: { bar: 'counter-bar', number: 'counter-number' } });
5. You can also pass the options via HTML data attributes:
<div id="example" data-counter-origin="10" data-counter-target="100" data-counter-type="bar" data-counter-duration="3000"> </div>