<span class="counter-value active" data-count="100">100</span>+ if(SDB.App.exists('.sg-counter-ready')){ $(document).ready(startCounterReady); flag = 1; function startCounterReady() { if ($('.sg-counter-ready').length > 0) { $('.sg-counter-ready').each(function () { var _current = $(this); var countDuration = 0; var toTop = _current.offset().top - window.innerHeight; if (countDuration == 0 && $(window).scrollTop() > toTop && _current.find('.counter-value').hasClass('active')) { _current.find('.counter-value').each(function () { var $this = $(this), countTo = $this.attr('data-count'); countNum: $this.text(); $({ }).animate({ countNum: countTo }, { duration: 1500, easing: 'swing', step: function (now) { $this.text(Math.ceil(now).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")); }, complete: function () { $this.stop(); } }); $this.removeClass('active'); }); countDuration = 1; } }); } } } if(SDB.App.exists('.sg-counter')){ $(window).scroll(startCounter); flag = 1; function startCounter() { if ($('.sg-counter').length > 0) { $('.sg-counter').each(function () { var _current = $(this); var countDuration = 0; var toTop = _current.offset().top - window.innerHeight; if (countDuration == 0 && $(window).scrollTop() > toTop && _current.find('.counter-value').hasClass('active')) { _current.find('.counter-value').each(function () { var $this = $(this), countTo = $this.attr('data-count'); countNum: $this.text(); $({ }).animate({ countNum: countTo }, { duration: 3000, easing: 'swing', step: function (now) { $this.text(Math.ceil(now).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")); }, complete: function () { $this.stop(); } }); $this.removeClass('active'); }); countDuration = 1; } }); } } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter