Number count according to page scroll using jQuery!

Asked

Viewed 150 times

0

I created a numerical counting animation with Jquery and it’s working fine, but I wanted the count to start only when the page scroll reaches the place where the animation is automatically. I don’t know much about JS anymore my code is this one. Thank you.

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

2 answers

0

There is a plugin called Waypoints that facilitates this type of action. Here is an example of how to use:

$(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

I found this topic similar to my question here, I think it’s exactly what I want, but I tried to adapt the code to my file and could not because I don’t know much of JS, if you can help me implement thank you. Number count according to jQuery page scroll!

Browser other questions tagged javascript jquery

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