how to add semicolon in animated number that activates with the scroll movement in javascript

Asked

Viewed 122 times

0

I am a laywoman in javascript.

My boss dreams of putting such a "stopwatch" on the site (animated numbers that trigger a movement similar to a machine counting the numbers, which activate when you reach the window through the scroll). But I can’t add the point and comma to the command 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>

<div class="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="clientes satisfeito" 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

  • What would be "add the point and comma in the javascript command"?

  • my idea is to look like this animation https://codepen.io/syedrafeeq/pen/rcfsJ

  • Do you want the number to have decimal places? Like commas and dots?

  • this separator and decimal together style "2,000,000.00 "

1 answer

1


I don’t know if I understood your question correctly, but do you want to format the number and insert decimal places in it? If so, use: toLocaleString()

The toLocaleString() method returns a string with a representation sensitive to the language of this number. Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

Example in 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>

<div class="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="clientes satisfeito" 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>

  • I tried to do it that way, but after he does animate it gives a kind of mistake (Nan)

  • @Betinasilva edited the answer and corrected. Any doubt I am available. Att.

  • did the test worked, but would have to take the "R$" tried to do in decimal style, but when it goes up and down with the scroll it decreases the stipulated value, does not leave the fixed value as it was, had some conflict?

  • @Betinasilva I edited and removed the R$. For this I removed style: "currency" and added minimumFractionDigits: 2 For questions related to toLocaleString see documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

  • Thank you so much for your help and for the referral!

  • Sorry to bother you I tried to make on account my boss’s change, but it’s taking me all day :( he doesn’t want more in "currency" accounting style he wants the separations in "." type "2,000,000" without the comma you know me what the style name?

  • @Betinasilva I made the change. Here’s how it works. https://jsfiddle.net/ymxdq980/3/

  • i did so https://jsfiddle.net/ymxdq980/3/ but when I move the scroll it decreases the value is not fixed :/

  • @Betinasilva I’m not getting to reproduce what you said. Enter your code in the updated jsfiddle.

  • https://jsfiddle.net/ymxdq980/5/

  • @BetinaSilva https://jsfiddle.net/ymxdq980/6/

  • in case it would not be in real :/ form would be a mile separator...

Show 7 more comments

Browser other questions tagged javascript jquery css number-format jquery-animate

You are not signed in. Login or sign up in order to post.