I have installed a jQuery Counter on my website, but I am experiencing an issue where the counter starts or finishes before reaching the section where the HTML code is embedded.
Any assistance with this problem would be greatly appreciated!
<script>
var isInViewport = function(elem) {
var distance = elem.getBoundingClientRect();
return (distance.top >= 0 && distance.left >= 0 && distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) && distance.right <= (window.innerWidth || document.documentElement.clientWidth));
}
// in your code ..
if(isInViewPort) {
$.fn.jQuerySimpleCounter = function( options ) {
var settings = $.extend({
start: 0,
end: 100,
easing: 'swing',
duration: 400,
complete: ''
}, options );
var thisElement = $(this);
$({count: settings.start}).animate({count: settings.end}, {
duration: settings.duration,
easing: settings.easing,
step: function() {
var mathCount = Math.ceil(this.count);
thisElement.text(mathCount);
},
complete: settings.complete
});
};
$('#number1').jQuerySimpleCounter({end: 52,duration: 5000});
$('#number2').jQuerySimpleCounter({end: 35,duration: 3000});
$('#number3').jQuerySimpleCounter({end: 998,duration: 6000});
}</script>