0

Criei uma animação de contagem numérica com JQuery e está funcionando legal, porém eu queria que a contagem iniciasse apenas quando o scroll da página atingir o local onde está a animação automaticamente. Não manjo muito de JS mais meu código é esse. Obrigado.

$('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
}); 

2 Respostas 2

0

Existe um plugin chamada WayPoints que facilita esse tipo de ação. Aqui tem um exemplo de como utilizar:

$(document).ready(function() {
	var waypoints = $('#circle').waypoint(function(direction) {
 $('.count').each(function() {
            $(this).prop('Counter', 0).animate({
                Counter: $(this).text()
            }, {
                duration: 900,
                easing: 'swing',
                step: function(now) {
                    $(this).text(Math.ceil(now));
                }
            });
        });
}, {
  offset: '25%'
})
});
#circle
{
    width: 100px;
    height: 100px;
    background: blue;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    float:left;
    margin:5px;
}
.count, .counted
{
  line-height: 100px;
  color:white;
  margin-left:30px;
  font-size:25px;
}
#talkbubble {
   width: 120px;
   height: 80px;
   background: green;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
   float:left;
   margin:20px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 15px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 20px solid green;
   border-bottom: 13px solid transparent;
}
<html>
<title>Animação Contador</title>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
</head>
<body>
<p>*</p>
<p>*</p>
<p>*</p>
<p>*</p>
<p>*</p>
<p>*</p>
<p>*</p>
<p>*</p>
<p>*</p>
<p>*</p>
<p>*</p>
<p>*</p>
<p>*</p>
<p>*</p>
<p>*</p>
<p>*</p>
<p>*</p>
<p>*</p>
<div id="circle"><span class="count">1234</span></div>
<div style="clear:both"></div>
<div id="talkbubble"><span class="count">145</span></div>
<div style="clear:both"></div>
<div id="talkbubble"><span class="count">145</span></div>
<div style="clear:both"></div>
<p>*</p>
<p>*</p>
<p>*</p>
<p>*</p>
<p>*</p>
<p>*</p>
</body>
</html>

0

Eu encontrei esse tópico semelhante a minha pergunta aqui, acho que é exatamente o que quero, porém tentei adaptar o código pro meu arquivo e não consegui porque não manjo muito de JS, se puder me ajudar a implementar agradeço. Contagem de numero de acordo com scroll da página jQuery!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .