Каким образом реализуется подобная анимация смены чисел? (картинка - пример).
Не нужен код - сам напишу. Просто хочется понять каким образом это можно сделать.
Стандартные эффекты анимации попробовал практически все, но всё не то.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуКаким образом реализуется подобная анимация смены чисел? (картинка - пример).
Не нужен код - сам напишу. Просто хочется понять каким образом это можно сделать.
Стандартные эффекты анимации попробовал практически все, но всё не то.
Вариант решения с использованием двух элементов (.current
и .next
), расположенных внутри контейнера с overflow: hidden
, CSS свойства margin-top
и метода .animate()
:
var $curElement = $(".number .current");
var $nextElement = $(".number .next");
var height = $curElement.height();
$(".number").css("height", height);
var duration = 1500;
var delay = 500;
var counter = 0;
(function animation() {
$curElement.text(counter).css("margin-top", 0);
counter = (counter + 1) % 10;
$nextElement.text(counter).css("margin-top", height);
setTimeout(function() {
$curElement.animate({ "margin-top": (-height) + "px" }, duration, animation);
$nextElement.animate({ "margin-top": 0 }, duration);
}, delay);
})();
.number {
overflow: hidden;
margin: 20px;
}
.next {
margin-top: -100px;
}
<div class="number">
<div class="current">0</div>
<div class="next"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>