$.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
});
};
var seEjecuto = 0;
$(window).scroll(function() {
if ($(this).scrollTop() >= $("#projectFacts").position().top && seEjecuto === 0) {
seEjecuto = 1;
$('#number1').jQuerySimpleCounter({start: 0,end: 450,duration: 3000});
$('#number2').jQuerySimpleCounter({start: 0,end: 20,duration: 3000});
$('#number3').jQuerySimpleCounter({start: 0,end: 700,duration: 2000});
$('#number4').jQuerySimpleCounter({start: 0,end: 8,duration: 2500});
}
});
.fullwidth {
width: 100% !important;
display: table;
float: none;
padding: 0;
min-height: 1px;
height: 100%;
position: relative;
}
#projectFacts .fullwidth{
padding: 0;
}
.factswrap{
display: flex;
margin-top: 30px;
flex-direction: row;
flex-wrap: wrap;
}
.factswrap .item{
width: 25%;
height: 100%;
padding: 50px 0px;
text-align: center;
transition: all .5s ease-in-out;
}
.factswrap .item:nth-child(1){
background: #004b87;
}
.factswrap .item:nth-child(2){
background: #175b91;
}
.factswrap .item:nth-child(3){
background: #004b87;
}
.factswrap .item:nth-child(4){
background: #175b91;
}
.factswrap .item p.number{
font-size: 40px;
padding: 0;
font-weight: bold;
}
.factswrap .item p{
color: rgba(255, 255, 255, 0.8);
font-size: 18px;
margin: 0;
padding: 10px;
font-family: 'Open Sans';
font-weight: bold;
transition: all .5s ease-in-out;
}
.factswrap .item span.Line-under{
width: 60px;
background: rgba(255, 255, 255, 0.8);
height: 2px;
display: block;
margin: 0 auto;
transition: all .5s ease-in-out;
}
.factswrap .item img{
width: 80px;
opacity: .8;
transition: all .5s ease-in-out;
}
.factswrap .item:hover img, .factswrap .item:hover p{
color: #fff;
opacity: 1;
}
.factswrap .item:hover span{
background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div id="projectFacts" class="sectionClass">
<div class="fullwidth height columns">
<div class="factswrap" onscroll="myFunction()">
<div class="item fadeupbig animated animated" data-number="450" style="visibility: visible;">
<img src="img/networking.png" alt="">
<p id="number1" class="number">0</p>
<span class="Line-under"></span>
<p>Lorem</p>
</div>
<div class="item fadeupbig animated animated" data-number="20" style="visibility: visible;">
<img src="img/portfolio.png" alt="">
<p id="number2" class="number">0</p>
<span class="Line-under"></span>
<p>Lorem</p>
</div>
<div class="item fadeupbig animated animated" data-number="700" style="visibility: visible;">
<img src="img/handshake.png" alt="">
<p id="number3" class="number">0</p>
<span class="Line-under"></span>
<p>Lorem</p>
</div>
<div class="item fadeupbig animated animated" data-number="8" style="visibility: visible;">
<img src="img/company.png" alt="">
<p id="number4" class="number">0</p>
<span class="Line-under"></span>
<p>Lorem</p>
</div>
</div>
</div>
</div>
<div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>