Простая анимация увеличения/уменьшения чисел на jQuery
Видел множество лейдингов, зайдя на которые, видишь информационный блок, например, число клиентов. Начинаешь спускаться – и скучное число «0» вскоре превращается в тысячи тысяч.
Даже не столько привлекает внимание число, сколько его эффектное появление. О том, как сделать такую анимацию, я сейчас расскажу. Существуют различные библиотеки для создания подобного эффекта, я же покажу, как это можно сделать гораздо проще.
Предположим, что у нас есть блок с ценой:
<div class="price">0</div>
Что нам нужно сделать? Анимацию увеличения числа от 0 до, например, 1000. Скрипт будет выглядеть следующим образом:
<script>
$(function() {
$({numberValue: 0}).animate({numberValue: 1000}, {
duration: 500, // Продолжительность анимации, где 500 = 0,5 одной секунды, то есть 500 миллисекунд
easing: "linear",
step: function(val) {
$(".price").html(Math.ceil(val)); // Блок, где необходимо сделать анимацию
}
});
});
</script>
По желанию, начальное число можно не задавать, а получать из блока. Тогда реализация будет следующая:
<script>
$(function() {
var numb_start = $(".price").text(); // Получаем начальное число
$({numberValue: numb_start}).animate({numberValue: 1000}, {
duration: 500, // Продолжительность анимации, где 500 = 0,5 одной секунды, то есть 500 миллисекунд
easing: "linear",
step: function(val) {
$(".price").html(Math.ceil(val)); // Блок, где необходимо сделать анимацию
}
});
});
</script>
Соответственно, переменная «numb_start» хранит в себе число из блока.
Автоматическая анимация увеличения/уменьшения чисел на jQuery
А если блок с числами находиться в самом низу? И при заходе на сайт пользователь просто не увидит вашей анимации? Решение есть! Нам просто нужно определить, виден ли блок на экране, и если да – запустить анимацию.
Реализация:
<script>
$(function() {
var target_block = $(".price"); // Ищем блок
var blockStatus = true;
$(window).scroll(function() {
var scrollEvent = ($(window).scrollTop() > (target_block.position().top - $(window).height()));
if(scrollEvent && blockStatus) {
blockStatus = false; // Запрещаем повторное выполнение функции до следующей перезагрузки страницы.
$({numberValue: 0}).animate({numberValue: 1000}, {
duration: 500, // Продолжительность анимации, где 500 - 0.5 одной секунды, то есть 500 миллисекунд
easing: "linear",
step: function(val) {
$(".price").html(Math.ceil(val)); // Блок, где необходимо сделать анимацию
}
});
}
});
});
</script>
Обратите внимание, что если начальное число больше конечного, то во всех случаях автоматически будет происходить анимация уменьшения.