JQuery/PHP

Realization method of website digital animation tumbling effect (loading at specified position)

 Alibaba Cloud

There are many number tumbling effects on the website. You can count the specified number from 0 to increase the animation when the page scrolls. This digital animation can control the delay time and animation transition time of the animation. It relies on plug-ins to listen for rolling events.

Here's how to realize the digital animation tumbling effect of this website.

Step 1: download the jquery digital animation rollover plug-in;

Want to be here? contact us bar
 Maker host

Step 2: introduce the plug-in on your website;

  1.  < script src = "jquery.waypoints.min.js" > </script>
  2.  < script src = "jquery.countup.min.js" > </script>

Step 3: Use The element acts as a container for numbers.

  1.  < span class = "counter" > one thousand nine hundred and eighty-one </ span >

You can use the data counter time and data counter delay attributes to set the animation time and delay time of digital animation.

  1.  < span class = "counter" data - counter - time = "5000" data - counter - delay = "50" > one thousand nine hundred and eighty-one </ span >

Step 4: Add the following code at the bottom of the page to initialize the digital animation.

  1.  $ ( '.counter' ) . countUp ( ) ;

Configuration parameters can also be passed in during initialization (speed and delay time can be controlled uniformly).

  1.  $ ( '.counter' ) . countUp ( {
  2.  delay :  ten ,
  3.  time :  two thousand
  4.  } ) ;

Realization method of website digital animation tumbling effect (loading at specified position)

157 people have bought
View Demo Upgrade VIP Buy Now

Collection
fabulous ( zero )

Post reply

Hot selling template

Ashade - Works exhibition photo album WordPress Chinese theme
 LensNews

This site accepts WordPress/PbootCMS/DedeCMS, etc
System construction, imitation, development, customization and other services!