My jQuery number counter is working perfectly, but it starts running as soon as the page loads. I'm trying to figure out how to make it run only when the element comes into view. Here is my current code:
EDIT
After some tinkering, I achieved the desired effect using waypoints. Here's the updated jQuery code:
$('#counter').waypoint(function (direction) {
$('.count').each(function () {
var $this = $(this);
jQuery({
Counter: 0
}).animate({
Counter: $this.text()
}, {
duration: 2000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
}, {
offset: '80%'
}); #counter {
position: relative;
color: #fff;
margin-top: 600px;
}
.counters {
padding: 100px 0;
width: 33.333%;
float: left;
}
#counter-1 {
background: #393939;
}
#counter-2 {
background: #494949;
}
#counter-3 {
background: #595959;
}
.line-numbers {
text-align: center;
display: block;
font-size: 55px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="counter">
<div id="counter-1" class="counters">
<span class="line-numbers count">2000</span>
</div>
<div id="counter-2" class="counters">
<span class="line-numbers count">2500</span>
</div>
<div id="counter-3" class="counters">
<span class="line-numbers count">150</span>
</div>
</section>