My knowledge of Javascript is exceptionally limited, so I would appreciate your assistance and patience with a very simple problem!
I have several spans with the same class. The spans contain numbers.
I want to trigger a count up animation when the span becomes visible to the user.
At the moment, the counters all begin to animate upon the page being loaded, which is not what I want.
MWE:
<html>
<body>
<div><span class="counter">200</span></div>
<div style="height:4000px;"></div>
<div><span class="counter">200</span></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.counterup/1.0/jquery.counterup.min.js"></script>
<script>
$('.counter').each(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text() },
{
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
} });
});
</script>
</body>
</html>