Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

JQUERY.COUNTO.JS: On Scroll Count Numbers NOT OnLoad

Tags:

javascript

html

jquery

css

twitter-bootstrap-3

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>
like image 400
Carl Angelo Nievarez Avatar asked Feb 05 '23 18:02

Carl Angelo Nievarez

2 Answers

To check if the element is scrolled into view, I'll use function from this answer.

Now, we can check if the element #counters is in view by using below function

function isScrolledIntoView(el) {
    var elemTop = el.getBoundingClientRect().top;
    var elemBottom = el.getBoundingClientRect().bottom;

    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    return isVisible;
}

This first gets the bounding points using getBoundingClientRect(). This returns top, left, bottom, right, width and height of the element on which the method is called. These can be used to detect if element is inside view. top and bottom are taken from this object and checked if element bottom is less than window height.

First of all, bind scroll event on the window. Inside the handler, check if element is in the view. When element comes in the view, then call the plugin on elements and unbind the scroll event.

function isScrolledIntoView(el) {
  var elemTop = el.getBoundingClientRect().top;
  var elemBottom = el.getBoundingClientRect().bottom;

  var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
  return isVisible;
}

$(window).on('scroll', function() {
  if (isScrolledIntoView(document.getElementById('counters'))) {
    $('.ace-counter-number').countTo();

    // Unbind scroll event
    $(window).off('scroll');
  }
});
.justaddheight {
  height: 500px;
}

.text-center {
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.js"></script>

<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="100">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>

JsFiddle Demo

like image 200
Tushar Avatar answered Feb 07 '23 06:02

Tushar

You can use appear.js plugin which provides event triggers for elements when they appear, disappear and reappear in the viewport.

<span class='count'>50</span>

And the JS

appear({
  init: function init() {},
  elements: function elements() {
    // Track all elements with the class "count"
    return document.getElementsByClassName('count');
  },
  appear: function appear(el) {
    $(el).countTo({
      from: 0,
      to: $(el).html(),
      speed: 1300,
      refreshInterval: 60
    });
  },
  disappear: function disappear(el) {},
  bounds: 200,
  reappear: true
});
like image 44
Dan Philip Avatar answered Feb 07 '23 06:02

Dan Philip
Sign in to Comment

Related questions

Javascript prompt alternative in Loop
why can't I delay addClass and removeClass using jquery?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!