0
CountUp
source link: https://www.tuicool.com/articles/iEjqiaU
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
A widget to animate a numerical value by counting to it.
Download + Demo
How To
The Countup component can be used to animate a number from an original value to a different final one. The animation will be triggered as soon as the number enters the viewport.
Set the content of the .js-countup element equal to the final numerical value.
You can edit the following data attributes (applied to the .js-countup element) to customize the plugin behavior:
data-countup-start: initial value of the countup. Default is 0;data-countup-duration: duration of the animation (in ms). Default is 3000 ms (3s);data-countup-decimal: number of decimal places. Default is 0;data-countup-sep: set this attribute equal to "true" if you want to show a comma as a thousands separator (e.g., 1,200 rather than 1200).
You can listen to the end of the animation using the countUpComplete custom event that is emitted when the animation is completed:
var countElement = document.getElementsByClassName('js-countup')[0];
countElement.addEventListener('countUpComplete', function(event){
// animation is over
});Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK