0
Projects
0
Happy customers
0
Bla bla
Step 1
Go to this page to download the zip file : https://github.com/inorganik/CountUp.js
Note that it works only with countUp 1.9.3 (not the version 2.0.0 or > )
Upload and enqueue the JS file :
wp_enqueue_script( 'countUp-js', plugin_dir_url( __FILE__ ) . 'assets/js/countUp.min.js', '','', true );
[ see HOWTO to learn how to add custom files ]
Step 2
Add a Text element (or a Headline element) and change his ID to myCounter1
Step 3
In a Code Block, add this Javascript code :
var numAnim = new CountUp("myCounter1", 0, 200, 0, 4);
numAnim.start();
Here is the result :
0
For more options, check this page :
https://inorganik.github.io/countUp.js/
It will also generate the code for you.
Note
Don't forget to use the Waypoints library if you want the animation to start only when it enters the viewport. Here is an example :
var waypoints = $('#myCounter3').waypoint(function(direction) {
var options = {
suffix: '%'
};
var numAnim = new CountUp("myCounter3", 0, 100, 2, 4, options);
numAnim.start();
this.destroy()
}, {
offset: '100%'
})
More info about Waypoints :
Trigger a function when you scroll to an element
The full code for the 3 counters at the top of this page :
(function($) {
var waypoints = $('#myCounter1').waypoint(function(direction) {
var numAnim = new CountUp("myCounter1", 0, 200, 0, 4);
numAnim.start();
this.destroy()
}, {
offset: '100%'
})
var waypoints = $('#myCounter2').waypoint(function(direction) {
var options = {
prefix: '+'
};
var numAnim = new CountUp("myCounter2", 0, 50, 0, 4, options);
numAnim.start();
this.destroy()
}, {
offset: '100%'
})
var waypoints = $('#myCounter3').waypoint(function(direction) {
var options = {
suffix: '%'
};
var numAnim = new CountUp("myCounter3", 0, 4.9, 1, 5, options);
numAnim.start();
this.destroy()
}, {
offset: '100%'
})
})(jQuery);