Add the following HTML for counter objects:
[code language=”html”]
<div id=”counternumber”></div>
<div id=”counterstart”></div>
[/code]
Add the following CSS:
[code language=”css”]
#counternumber {
font-size: 12vw;
font-family: “Lucida Console”, Monaco, monospace;
display: block;
color: #ffffff;
text-align: center;
line-height: 1 !important;
}
#counternumber:after {
content: “”;
display: block;
height: 1px;
width: 60%;
background-color: #ffffff;
margin: 1% auto auto auto;
}
[/code]
Add the following for javascript to work the div:
[code language=”javascript”]
<script type=”text/javascript”>
var START_DATE = new Date(“September 18, 2017 00:00:00”); // put in the starting date here
var INTERVAL = 4; // in seconds
var INCREMENT = 1; // increase per tick
var START_VALUE = 14082015; // initial value when it’s the start date
var count = 0;
/***********************************************************/
/* Put in Commas */
function numberWithCommas(count) {
var parts = count.toString().split(“.”);
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, “,”);
return parts.join(“.”);
}
/***********************************************************/
/* Start Value */
/***********************************************************/
$(“#counternumber”).html(numberWithCommas(START_VALUE));
/***********************************************************/
/* Start ONCE on Scroll
/***********************************************************/
var triggerAtY = $(‘#counterstart’).offset().top – $(window).outerHeight();
$(window).scroll(function(event) {
// #target not yet in view
if (triggerAtY > $(window).scrollTop()) {
return;
}
/***********************************************************/
/* Insert Start Value in #CounterNumber */
/***********************************************************/
$(document).ready(function() {
var msInterval = INTERVAL * 1000;
var now = new Date();
count = parseInt((now – START_DATE)/msInterval) * INCREMENT + START_VALUE;
/***********************************************************/
/* document.getElementById(‘counternumber’).innerHTML = numberWithCommas(count); */
/***********************************************************/
/* Default Count Up Function */
(function($) {
$.fn.countTo = function(options) {
// merge the default plugin settings with the custom options
options = $.extend({}, $.fn.countTo.defaults, options || {});
// how many times to update the value, and how much to increment the value on each update
var loops = Math.ceil(options.speed / options.refreshInterval),
increment = (options.to – options.from) / loops;
return $(this).each(function() {
var _this = this,
loopCount = 0,
value = options.from,
interval = setInterval(updateTimer, options.refreshInterval);
function updateTimer() {
value += increment;
loopCount++;
$(_this).html(value.toFixed(options.decimals).replace(/\B(?=(\d{3})+(?!\d))/g, “,”));
if (typeof(options.onUpdate) == ‘function’) {
options.onUpdate.call(_this, value);
}
if (loopCount >= loops) {
clearInterval(interval);
value = options.to;
if (typeof(options.onComplete) == ‘function’) {
options.onComplete.call(_this, value);
}
}
}
});
};
$.fn.countTo.defaults = {
from: 0, // the number the element should start at
to: 100, // the number the element should end at
speed: 500, // how long it should take to count between the target numbers
refreshInterval: 100, // how often the element should be updated
decimals: 0, // the number of decimal places to show
onUpdate: null, // callback method for every time the element is updated,
onComplete: null, // callback method for when the element finishes updating
};
})(jQuery);
/***********************************************************/
/* Custom Count Up Variables */
/***********************************************************/
jQuery(function($) {
$(‘#counternumber’).delay(400).countTo({
from: 14082015,
to: count,
decimals: 0,
speed: 500,
refreshInterval: 1,
onComplete: function(value) {
console.debug(this);
}
});
});
/***********************************************************/
/* Insert Final Countup in #CustomerNumber */
/***********************************************************/
window.setInterval( function(){
count += INCREMENT;
document.getElementById(‘counternumber’).innerHTML = numberWithCommas(count);
}, msInterval);
});
/***********************************************************/
$(this).off(event);
})
var counter = 0;
$(window).scroll(function(event) {
console.log(‘I\’m expensive’, $(window).scrollTop(), ++counter);
});
</script>
[/code]
[WP-Coder id=”1″]