This article brings you the content is about how to use the plug-in digital scrolling plugin numberanimate.js? Have a certain reference value, the need for friends can refer to, I hope to help you.
There is a need to achieve digital scrolling, thinking that there are a lot of this effect of the plug-in, do not build their own wheels, so, find a numberanimate JS digital rolling plug-in, very easy to use, very simple, just meet the needs.
The code is as follows:
<! DOCTYPE html>
Want the effect is over a period of time plus 1 effect, can be achieved, but there is a small bug
, that is, for example, a single digit added to 9 o'clock and then the bit is 0, the problem comes, here 0 of the number is not rolling out, directly to the next time interval scroll to 11, debugging a long period to find, is numberAnimate.js
, the 85th line of the judging condition has a problem, comment out the If judgment is good, such as:
, the 85th line $(this).css("top")
has always been 0px
, and the 84th row calculated to get to the value of the thisTop
number rolled to 0 o'clock, so the result is 0px
directly skipped the judgment, did not perform to the transform
animation there, so less 0 effect, resulting in the appearance of the effect is 9 jump directly to 11, Not 10.
In addition, the hint, change the size of the number of the font, need to modify the numberAnimate.css
height、width、字号
proportion to grasp good, accidentally on the bad, personally experience-_-| |