All geek questions in one place

JQUERY.COUNTO.JS: number of scroll numbers NOT ONLoad

I work with one website and I want to add counts with it, so I use javascript.countTo.js , I created each section to group related data, and I put the section below the section of my portfolio . Every time a page loads a number, and when I scroll, I always see the numbers stop or stop counting. Now I want the number to be counted when I scroll and get into the section counter . Also, I used WOW.js and easingJS with my site, this is best if you combined the code with it, but it is also acceptable if not. The code is as follows: <section id="counters"> <section class="justaddheight portfolio"> <section id="counters">

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>
+4
source share
2 answers

To check if an element scrolls in the view, I will use the function from this answer .

Now we can check if the element exists #countersusing the following 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(). It returns top, left, bottom, right, widthand heightthe element on which the method is called. They can be used to determine if an item is inside. topand bottomare taken from this object and checked if the height of the element is less than the height of the window.

, scroll window. , . , scroll.

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>
Hide result

JsFiddle Demo

+5

manifest.js , , , .

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

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
});
+1

Source: https://habr.com/ru/post/1673961/

More articles:


All Articles