JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="counter_holder center" style="color:#ffffff; font-size:168px;">
<span class="counter type1" data-delay="" style="background-color: black; height:168px; line-height:168px;">1678</span>
</div>
CSS
.counter_holder {
display: block;
opacity: 0;
filter: alpha(opacity: 0);
-webkit-transition: opacity 0.3s ease 0s;
-moz-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
width: 100%;
font-size: 150px;
line-height: 150px;
}
.counter_holder.left {
text-align: left;
}
.counter_holder.right {
text-align: right;
}
.counter_holder.center {
text-align: center;
}
.counter_holder span.counter {
font-family: "Oswald", sans-serif;
overflow: hidden;
display: inline-block !important;
text-align: center;
height: 150px;
font-size: inherit;
line-height: inherit;
}
.counter_holder h4 {
margin: 30px 0px 0px;
}
.counter_holder p {
margin: 18px 0px 0px;
}
.tocounter {
float: none;
margin: 0px;
}
JavaScript
function initToCounter() {
"use strict";
if ($j('.counter.type1').length) {
$j('.counter.type1').each(function() {
var delay = $j(this).data('delay');
var time = 0;
if (delay !== "" && delay !== 0) {
time = delay;
}
var $this = $j(this);
if ($j('.touch .no_delay').length) {
$this.parent().css('opacity', '1');
var $max = parseFloat($this.text());
$this.countTo({
from: 0,
to: $max,
speed: 1500,
refreshInterval: 50
});
resizeFonts();
} else {
$this.appear(function() {
setTimeout(function() {
$this.parent().css('opacity', '1');
var $max = parseFloat($this.text());
$this.countTo({
from: 0,
to: $max,
speed: 1500,
refreshInterval: 50
});
resizeFonts();
}, time);
}, {
accX: 0,
accY: -200
});
}
});
}
}