I'm working with one page website and I want to add a counting numbers with it, so I use javascript.countTo.js. I created every section to group related data and I put the section counter <section id="counters">
below my portfolio section <section class="justaddheight portfolio">
. Everytime the page load the number count and when I scroll I always see that numbers stop or ended it's counting. Now, I want the number counts when I scroll and get into the section counter <section id="counters">
. In addition, I used WOW.js and easingJS with my site, it's the best if you combined the code with it, but it also acceptable if not. The code are the following below:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1"><!--The Viewport-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!--Character Set-->
<meta http-equiv="Cache-control" content="no-cache"> <!--The No-Cache-->
<!--///////////////////////////////////////////////////////
CSS
///////////////////////////////////////////////////////-->
<link rel="stylesheet" href="css/animate.min.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Font-Awesome -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Icomoon-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Simple Line Icons -->
<link rel="stylesheet" href="css/simple-line-icons.css">
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<!--///////////////////////////////////////////////////////
JAVASCRIPT
///////////////////////////////////////////////////////-->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Wow -->
<script src="js/wow.min.js"></script>
<!-- Counter -->
<script src="js/jquery.countTo.js"></script>
<!--Easing-->
<script src="js/jquery.easing.1.3.js"></script>
<!--Custom JS-->
<script src="js/custom.js"></script>
</head>
<body id="top">
<section class="justaddheight text-center about" >
<h1>SCROLL DOWN</h1>
<p>First, Scroll Now</p>
<p>Second, try Again but wait for few seconds before scroll to identify.</p>
</section>
<section class="justaddheight service">
</section>
<section class="justaddheight portfolio">
</section>
<section id="counters">
<div class="ace-overlay"></div>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="ace-counter to-animate">
<i class="ace-counter-icon icon-briefcase to-animate-2"></i>
<span class="ace-counter-number js-counter" data-from="0" data-to="89" data-speed="5000" data-refresh-interval="50">89</span>
<span class="ace-counter-label">Finished projects</span>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="ace-counter to-animate">
<i class="ace-counter-icon icon-code to-animate-2"></i>
<span class="ace-counter-number js-counter" data-from="0" data-to="2343409" data-speed="5000" data-refresh-interval="50">2343409</span>
<span class="ace-counter-label">Templates</span>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="ace-counter to-animate">
<i class="ace-counter-icon icon-cup to-animate-2"></i>
<span class="ace-counter-number js-counter" data-from="0" data-to="1302" data-speed="5000" data-refresh-interval="50">1302</span>
<span class="ace-counter-label">Cup of coffees</span>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="ace-counter to-animate">
<i class="ace-counter-icon icon-people to-animate-2"></i>
<span class="ace-counter-number js-counter" data-from="0" data-to="52" data-speed="5000" data-refresh-interval="50">52</span>
<span class="ace-counter-label">Happy clients</span>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
<style type="text/css">
/* USE JUST TO ADJUST HEIGHT*/
.justaddheight{
height: 500px;
}
.text-center{
text-align: center;
}
</style>
<script type="text/javascript">
$('.counter-number').countTo();
</script>