Анимированное увеличение чисел на jQuery +  CSS
09.04.2018 17:14

Анимированное увеличение чисел на jQuery + CSS

Эффект анимированной прокрутки увеличения чисел от нуля до заданного значения, используется довольно часто. Как правило данный эффект применяют для вывода какой-либо ценной информации, на которую пользователь должен обратить внимание. Используя функцию анимации мы создаем удобства просмотра, увеличиваем период нахождения посетителей на сайте. За плавность увеличения чисел и показ отвечает jQuery. Оформление анимированных счетчиков представлено в стилях CSS.

index.htm
<div class="container">
	<div class="column">
		<div class="count">365</div>
		<div class="text">Дней</div>
	</div>
	<div class="column">
		<div class="count">22</div>
		<div class="text">Часа</div>
	</div>
	<div class="column">
		<div class="count">19</div>
		<div class="text">Минут</div>
	</div>
	<div class="column">
		<div class="count">52</div>
		<div class="text">Секунды</div>
	</div>
</div>
Внешний вид формируется правилами CSS. Создайте файл style.css и вставьте в него код представленный ниже:
.column {
	float: left;
	margin: 15px;
	width: 150px;
	height: 150px;
	border: 2px solid #fff;
}

.count
{
	line-height: 100px;
	color:#fff;
	text-align: center;
	font-size:42px;
	font-style: italic;
}

.text{
	text-align: center;
	color: #fff;
	font-size: 14px;
}

script.js
$(document).ready(function () {
	

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


});	

106
Меню
Теги
Реклама