Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save karamanskiy/8b4d7588d91f7429d400c0603f9c899d to your computer and use it in GitHub Desktop.
Save karamanskiy/8b4d7588d91f7429d400c0603f9c899d to your computer and use it in GitHub Desktop.
Анимация счетчика цифр при скролле
/* ANIMATE NUMBERS */
var isResizeble = false;
function animateNumb() {
isResizeble = true;
$('.benefits-count').each(function() {
$(this).prop('counter',0).animate({
counter:$(this).data('count')
},{
duration: 2000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
});
}
$(window).on('scroll load', function() {
var target = $('.benefits').offset().top,
screenPart = $(window).innerHeight() * 0.66;
if($(window).scrollTop() >= (target - screenPart) && !isResizeble) {
animateNumb();
}
});
//HTML
<ul class="benefits__list">
<li class="benefits__item">
<h3>We spent</h3>
<div class="benefits-count" data-count="540">0</div>
<div class="benefits-text">hours</div>
<p>testing different <br> website builders</p>
</li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment