I'm looking to create a counting animation that triggers when the element scrolls onto the page, rather than animating right when the page loads. I attempted to use $(window).scroll(function () but struggled to make it work with an if statement that would start the animation when the element appears between the top and bottom of the screen.
HTML:
<div class="sectiontitle">
<h2>Project Stats</h2>
<span class="headerLine"></span>
</div>
<div id="projectFacts" class="sectionClass">
<div class="fullWidth eight columns">
<div class="projectFactsWrap ">
<div class="item wow fadeInUpBig animated animated" data-number="12" style="visibility: visible;">
<i class="fa fa-briefcase"></i>
<p id="number1" class="number">12</p>
<span></span>
<p>Projects Completed</p>
</div>
<div class="item wow fadeInUpBig animated animated" data-number="55" style="visibility: visible;">
<i class="fa fa-smile-o"></i>
<p id="number2" class="number">55</p>
<span></span>
<p>Satisfied Clients</p>
</div>
<div class="item wow fadeInUpBig animated animated" data-number="359" style="visibility: visible;">
<i class="fa fa-coffee"></i>
<p id="number3" class="number">359</p>
<span></span>
<p>Cups of Coffee</p>
</div>
<div class="item wow fadeInUpBig animated animated" data-number="246" style="visibility: visible;">
<i class="fa fa-camera"></i>
<p id="number4" class="number">246</p>
<span></span>
<p>Photos Taken</p>
</div>
</div>
</div>
</div>
CSS:
.sectionClass {
padding: 20px 0px 50px 0px;
position: relative;
display: block;
}
.fullWidth {
width: 100% !important;
display: table;
float: none;
padding: 0;
min-height: 1px;
height: 100%;
position: relative;
line-height: 50px;
}
.sectiontitle {
background-position: center;
margin: 30px 0 0px;
text-align: center;
min-height: 20px;
}
.sectiontitle h2 {
font-size: 30px;
color: #222;
margin-bottom: 0px;
padding-right: 10px;
padding-left: 10px;
}
.headerLine {
width: 160px;
height: 2px;
display: inline-block;
background: #101F2E;
}
...
JQuery:
<script>
$.fn.jQuerySimpleCounter = function( options ) {
var settings = $.extend({
start: 0,
end: 100,
easing: 'swing',
duration: 400,
complete: ''
}, options );
...
</script>