Counter

We have used counter in this template using jQuery plugin named counterup

1. Basic Block we have designed
[code language=”html”]
<div class="col-md-3 col-sm-6 col-xs-12 text-center wow fadeInDown" data-wow-duration="500ms">
<div class="counters-item">
<div>
<span data-speed="3000" data-to="320">320</span>
</div>
<i class="fa fa-users fa-3x"></i>
<h3>Happy Clients</h3>
</div>
</div>
[/code]
Change the value of span as you want.

2. jQuery code for counter up
[code language=”javascript”]
(function() {
var count = {
initialized : false,
initialize : function() {
if (this.initialized)
return;
this.initialized = true;
this.build();
},
build : function() {
this.animations();
},
animations : function() {
// Count To
$(".counters-item [data-to]").each(function() {
var $this = $(this);
$this.appear(function() {
$this.countTo({});
}, {
accX : 0,
accY : -150
});
});
},
};
count.initialize();
})();
[/code]
you can customize the settings of counterUp (make sure you have read the documentation from here

Was this article helpful to you? Yes No

How can we help?