Created
May 17, 2019 10:27
-
-
Save karamanskiy/8b4d7588d91f7429d400c0603f9c899d to your computer and use it in GitHub Desktop.
Анимация счетчика цифр при скролле
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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