xxxxxxxxxx1
<div class="container my-5 pt-5 pb-3 px-md-5 z-depth-1">2
3
4
<!--Section: Content-->5
<section class="dark-grey-text">6
7
<h3 class="text-center font-weight-bold mb-4 pb-2">Counter</h3>8
9
<h3 class="mb-3">Attributes</h3>10
11
<ul class="mb-4">12
<li>data-from : to change starting point</li>13
<li>data-to : to change ending point</li>14
<li>data-time : to change how long transition takes</li>15
</ul>16
17
<div class="count-up h1 text-center mb-4" data-from="10" data-to="20000" data-time="1000">18
019
</div>20
21
<h3 class="mb-3">22
How long did you develop it? <span class="count1" data-from="0" data-to="5" data-time="2000">0</span> hours23
</h3>24
25
<div>26
Was it worth it? <span class="style"><span class="count2" data-from="0" data-to="100" data-time="1000">0</span> %</span>27
</div>28
29
<div>30
This many ppl trusted I can deliver it in one day <span class="count3 style" data-from="30" data-to="-30" data-time="5000"></span>31
</div>32
33
<div class="pb-4">34
It works with huge numbers too :O <span class="count4 style" data-from="-10000" data-to="10000" data-time="3000"></span>35
</div>36
37
<h3 class="my-4 block text-center">↓ Check this out ↓</h3>38
39
<div class="mb-4">40
You can animate it! <span class="pl-5 style last wow animated bounceIn delay-3s"><span class="count5" data-from="0" data-to="100" data-time="2000">0</span> %</span>41
</div>42
43
</section>44
<!--Section: Content-->45
46
47
</div>1
1
xxxxxxxxxx1
(function ($){2
$.fn.counter = function() {3
const $this = $(this),4
numberFrom = parseInt($this.attr('data-from')),5
numberTo = parseInt($this.attr('data-to')),6
delta = numberTo - numberFrom,7
deltaPositive = delta > 0 ? 1 : 0,8
time = parseInt($this.attr('data-time')),9
changeTime = 10;10
11
let currentNumber = numberFrom,12
value = delta*changeTime/time;13
var interval1;14
const changeNumber = () => {15
currentNumber += value;16
//checks if currentNumber reached numberTo17
(deltaPositive && currentNumber >= numberTo) || (!deltaPositive &¤tNumber<= numberTo) ? currentNumber=numberTo : currentNumber;18
this.text(parseInt(currentNumber));19
currentNumber == numberTo ? clearInterval(interval1) : currentNumber; 20
}21
22
interval1 = setInterval(changeNumber,changeTime);23
}24
}(jQuery));25
26
$(document).ready(function(){27
28
$('.count-up').counter();29
$('.count1').counter();30
$('.count2').counter();31
$('.count3').counter();32
$('.count4').counter();33
34
new WOW().init();35
36
setTimeout(function () {37
$('.count5').counter();38
}, 3000);39
}); Console errors: 0