how to add a semicolon in Animated number that activates with scrolling in javascript

Question

how to add a semicolon in Animated number that activates with scrolling in javascript

Navigation

#1 by (1 votes)

0

I am a layperson in javascript .

My boss dreams of putting such a "timer" on the site (animated numbers that trigger a machine-like movement by counting the numbers, which activate when you reach the window through the scroll). But I can not add the semicolon in the command of javascript

        $(document).ready(function () {

             function visibleHideme() {
                $('.quadrado').each(function () {

                    var top_of_object = $(this).offset().top;
                    var bottom_of_object = $(this).offset().top + $(this).outerHeight();
                    var half_of_object = $(this).offset().top + ($(this).outerHeight() / 2);
                    var top_of_window = $(window).scrollTop();
                    var bottom_of_window = $(window).scrollTop() + $(window).height();

                    if (half_of_object < top_of_window) {
                        $(this).css({ 'opacity': '0', 'top': '-50px' });
                    }
                    if (half_of_object > bottom_of_window) {
                        $(this).css({ 'opacity': '0', 'top': '50px' });
                    }

                    else if (half_of_object > top_of_window && half_of_object < bottom_of_window) {
                        $(this).css({ 'opacity': '1', 'top': '0px' });
                    }

                });
            }
            visibleHideme();

            $(window).scroll(function () {
                visibleHideme();
            });

        });





        function ativaContador(e) {
            $('.count-number').each(function () {
             $(this).prop('.count-number', 0).animate({
                    Counter: $(this).text()
                }, {
                    duration: 1000,
                    easing: 'swing',
                    separator: ',ddd',
                    step: function (now) {

                        $(this).text(Math.ceil(now));
                    },
                    complete: function () {
                        $(this).stop(true, true)                          


                    },
                });

            });
        }

        $(window).scroll(function (e) {
           
            var alturaBody = $(window).height();
            var distanciaElemento = $('.count-number').offset().top;
            var posicaoScroll = $(this).scrollTop();
            var alturaElemento = $('.count-number').outerHeight();

          
            if (posicaoScroll > (distanciaElemento + alturaElemento - alturaBody)) {
                ativaContador();
                floored_number = floored_number.toString().replace('.', ',');

            }
        });

body {
  padding: 10px;
  font-family: Helvetica;
  background-color: white;
}

            .col_fifth {
            width: 95%;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(158px, 2fr));
            grid-gap: 8px;
            margin: auto;
        }
            

        .quadrado {
            text-align: center;
            margin-bottom: 0px;
            color: #2d2d2d;
            width: 198px;
            display: table;
            float: left;
            padding: 10px;
            position: relative;
            transition: opacity 0.6s ease, top 0.6s ease;
            margin: 5px;
            justify-content: center;

        }


   
        .counter-cronometro {
            padding: 10px;
            border-radius: 10px;
            display: table;
            justify-content: center;
            width: 190px;
            margin: 0px;
            height: 190px;
            background-color: #f9f9f9;
        }

        .count-title {
            font-size: 28px;
            margin-top: 5px;
            margin-bottom: 0;
            text-align: center;
            font-weight: bold;
            display: inline;
        }

        .count-text {
            color: #898989;
            font-size: 18px;
            font-weight: bold;
            margin-top: 5px;
            margin-bottom: 0;
            text-align: center;
        }

         .count-number {
            font-weight: bold;
            font-size: 20px;
            display: inline;
        }


       @media only screen and (max-width: 320px)   {

            .col_fifth {
            width: 40%;
           display: table;
           float:left;
            margin: auto;
        }

              .counter-cronometro {
            padding: 5px;
            border-radius: 10px;   
            justify-content: center;
            width: 140px;
            margin: 0 0px;
            height: 160px;
            background-color: #f9f9f9;
        }


            div.quadrado {
                text-align: center;
                margin-bottom: 0px;
                color: #2d2d2d;
                width: 30%;
                padding: 5px;

                position: relative;
                transition: opacity 0.6s ease, top 0.6s ease;
            }

            div.count-title {
                font-size: 20px;
                margin-top: 5px;
                margin-bottom: 0;
                text-align: center;
                font-weight: bold;
                display: inline;
            }

            div.count-text {
                color: #898989;
                font-size: 13px;
                font-weight: bold;
                margin-top: 5px;
                margin-bottom: 0;
                text-align: center;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><divclass="col_fifth">


<div class="quadrado">
<div class="counter-cronometro">
<img src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/trophy%201.png"border="0" alt=" photo trophy 1.png" width="67px" <br></br><br> 
<div class="count-title">+ <h2  class="count-number">59</h2></div> <p class="count-text">Anos de Liderança</p> </div></div>


<div class="quadrado">
 <div class="counter-cronometro">
<img src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/icon%201.png"border="0" width="65px" alt="preço zetaflex"<br></br><br>
<span class="count-title">+ <h2 class="count-number">200000000 </h2><p class="count-text ">m² Vendidos</p></div></div>
  

<div class="quadrado">
 <div class="counter-cronometro">
 <img src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/mapa-brasil.png"border="0" border="0" alt="Áreas atendidas" width="67px"<br></br><br> 
     <div class="count-title">+ <h2 class="count-number">4000</h2></div> <p class="count-text ">Municípios Atendidos</p></div></div>


<div class="quadrado">
 <div class="counter-cronometro"> 
<img src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/businessman-1_1.png"border="0" alt="representantes"width="80px" style="margin-top:10px;"/></br><br>
<div class="count-title">+ <h2  class="count-number">500</h2> </div> <p class="count-text ">Colaboradores</p></div></div>
  


<div class="quadrado">
<div class="counter-cronometro">
<img src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/diploma_1.png"border="0" alt="Patente" width="70px"<br></br><br>
<div class="count-title">+ <h2  class="count-number">160</h2> </div><p class="count-text ">Patentes</p></div></div>


<div class="quadrado">
 <div class="counter-cronometro">
<img  src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/real-estate-agreement%201.png"alt="clientessatisfeito" width="65px" /><br></br> 
<div class="count-title"> + <h2 class="count-number">300000</h2></div><p class="count-text "> Clientes Satisfeitos</p></div></div>



</div>

javascript jquery css number-format jquery-animate

asked by anonymous 24.09.2018 / 18:15

1 answer

How to add a logo to the HTML + CSS menu? My struct type is not recognized within my class

score 1 · Accepted Answer

I do not know if I understand your question well, but do you want to format the number and insert decimal places in it? If yes, use: toLocaleString()

The toLocaleString () method returns a string with a representation sensitive to the language of this issue. Source: link

Example on JSFiddle

$(document).ready(function() {

  function visibleHideme() {
    $('.quadrado').each(function() {

      var top_of_object = $(this).offset().top;
      var bottom_of_object = $(this).offset().top + $(this).outerHeight();
      var half_of_object = $(this).offset().top + ($(this).outerHeight() / 2);
      var top_of_window = $(window).scrollTop();
      var bottom_of_window = $(window).scrollTop() + $(window).height();

      if (half_of_object < top_of_window) {
        $(this).css({
          'opacity': '0',
          'top': '-50px'
        });
      }
      if (half_of_object > bottom_of_window) {
        $(this).css({
          'opacity': '0',
          'top': '50px'
        });
      } else if (half_of_object > top_of_window && half_of_object < bottom_of_window) {
        $(this).css({
          'opacity': '1',
          'top': '0px'
        });
      }

    });
  }
  visibleHideme();

  $(window).scroll(function() {
    visibleHideme();
  });

});





function ativaContador(e) {
  $('.count-number').each(function() {
    $(this).prop('.count-number', 0).animate({
      Counter: $(this).text()
    }, {
      duration: 1000,
      easing: 'swing',
      separator: ',ddd',
      step: function(now) {

        if (now > 0)
          $(this).text(Math.ceil(now).toLocaleString("pt-BR", {
            currency: "BRL",
            minimumFractionDigits: 2
          }));

      },
      complete: function() {
        $(this).stop(true, true)


      },
    });

  });
}

$(window).scroll(function(e) {

  var alturaBody = $(window).height();
  var distanciaElemento = $('.count-number').offset().top;
  var posicaoScroll = $(this).scrollTop();
  var alturaElemento = $('.count-number').outerHeight();

  if (posicaoScroll > (distanciaElemento + alturaElemento - alturaBody)) {
    ativaContador();

    floored_number = floored_number.toString().replace('.', ',');

  }
});

  body {
  padding: 10px;
  font-family: Helvetica;
  background-color: white;
}

.col_fifth {
  width: 95%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 2fr));
  grid-gap: 8px;
  margin: auto;
}

.quadrado {
  text-align: center;
  margin-bottom: 0px;
  color: #2d2d2d;
  width: 198px;
  display: table;
  float: left;
  padding: 10px;
  position: relative;
  transition: opacity 0.6s ease, top 0.6s ease;
  margin: 5px;
  justify-content: center;
}

.counter-cronometro {
  padding: 10px;
  border-radius: 10px;
  display: table;
  justify-content: center;
  width: 190px;
  margin: 0px;
  height: 190px;
  background-color: #f9f9f9;
}

.count-title {
  font-size: 28px;
  margin-top: 5px;
  margin-bottom: 0;
  text-align: center;
  font-weight: bold;
  display: inline;
}

.count-text {
  color: #898989;
  font-size: 18px;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 0;
  text-align: center;
}

.count-number {
  font-weight: bold;
  font-size: 20px;
  display: inline;
}

@media only screen and (max-width: 320px) {
  .col_fifth {
    width: 40%;
    display: table;
    float: left;
    margin: auto;
  }
  .counter-cronometro {
    padding: 5px;
    border-radius: 10px;
    justify-content: center;
    width: 140px;
    margin: 0 0px;
    height: 160px;
    background-color: #f9f9f9;
  }
  div.quadrado {
    text-align: center;
    margin-bottom: 0px;
    color: #2d2d2d;
    width: 30%;
    padding: 5px;
    position: relative;
    transition: opacity 0.6s ease, top 0.6s ease;
  }
  div.count-title {
    font-size: 20px;
    margin-top: 5px;
    margin-bottom: 0;
    text-align: center;
    font-weight: bold;
    display: inline;
  }
  div.count-text {
    color: #898989;
    font-size: 13px;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 0;
    text-align: center;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><divclass="col_fifth">


  <div class="quadrado">
    <div class="counter-cronometro">
      <img src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/trophy%201.png"border="0" alt=" photo trophy 1.png" width="67px" <br></br><br>
      <div class="count-title">+
        <h2 class="count-number">59</h2>
      </div>
      <p class="count-text">Anos de Liderança</p>
    </div>
  </div>


  <div class="quadrado">
    <div class="counter-cronometro">
      <img src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/icon%201.png"border="0" width="65px" alt="preço zetaflex" <br></br><br>
      <span class="count-title">+ <h2 class="count-number">200000000 </h2><p class="count-text ">m² Vendidos</p></div></div>
  

<div class="quadrado">
 <div class="counter-cronometro">
 <img src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/mapa-brasil.png"border="0" border="0" alt="Áreas atendidas" width="67px"<br></br><br> 
     <div class="count-title">+ <h2 class="count-number">4000</h2></div> <p class="count-text ">Municípios Atendidos</p></div></div>


<div class="quadrado">
 <div class="counter-cronometro"> 
<img src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/businessman-1_1.png"border="0" alt="representantes"width="80px" style="margin-top:10px;"/></br><br>
<div class="count-title">+ <h2  class="count-number">500</h2> </div> <p class="count-text ">Colaboradores</p></div></div>
  


<div class="quadrado">
<div class="counter-cronometro">
<img src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/diploma_1.png"border="0" alt="Patente" width="70px"<br></br><br>
<div class="count-title">+ <h2  class="count-number">160</h2> </div><p class="count-text ">Patentes</p></div></div>


<div class="quadrado">
 <div class="counter-cronometro">
<img  src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/real-estate-agreement%201.png"alt="clientessatisfeito" width="65px" /><br></br> 
<div class="count-title"> + <h2 class="count-number">300000</h2></div><p class="count-text "> Clientes Satisfeitos</p></div></div>



</div>