Loading...

Как сделать анимацию цифр в зеро блоке TILDA?

С помощью нашей модификации ты можешь анимировать числа в Zero Block Тильда, задав начальные значения и скорость анимации.
Время настройки: 3 минуты
Генератор кода
Видео инструкция
Пример
Инструкция
1. В генераторе настраиваем время анимации, т.е. сколько секунд пройдет от начальной цифры до нужной;

2. Можно указать текст в начале числа и после него;

3. Выбираем тип разделения тысячных;

4.Пишем в генераторе класс текстового элемента и вставляем его в Зеро Блок;

Что бы указать класс у элемента, нажимаем на него правой кнопкой мыши и выбираем из списка последнюю строку "Add CSS Class Name", далее, справа в настройках указываем тот же класс что и в генераторе;

5. Указываем начальную цифру и конечную цифру;

Совет: начальная цифра в генераторе должна совпадать начальной в тексте, тогда визуально не будет видно "подёргиваний" в цифрах;

6. Копируем сгенерированный HTML код и вставляем его в блок Т123;

7. Можно добавить до 15 элементов (цифр) в одном коде;

8. В анимации используется настройка "swim" - т.е. кривая скорости анимации стоит по стандарту. медленное начало, к середине ускоряется и к концу опять замедляется;
с 1 600 года
Об авиакомпании "От винта!"
в 1 800 году
Начали летать
Стали мировым лидером
3 321
95
Сотрудников в команде
Самолётов в компании
Время анимации (сек.)
Текст в начале
Текст в конце
Разделение тысячных
Цифры
Класс элемента
Цифра в начале
Цифра в конце
Копировать код<!-- Как сделать анимацию цифр в зеро блоке TILDA? -->
<!-- https://nolim.cc/animation-numbers -->
<script> function numberWithSpaces(x,srt) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, srt); } $(document).ready(function(){ let checkCls = setInterval(function(){ if($('.born').length > 0) { clearInterval(checkCls); var number = ['.nolimnumber']; var numberstart = ['0']; var numberfinish = ['356']; var blockStatus = ['0']; var scrollEvent = []; var digit_block = []; $(window).scroll(function() { for(let i = 0; i < number.length; i++){ digit_block[i] = number[i] + ' .tn-atom'; var n1 = Number(numberstart[i]); var n2 = Number(numberfinish[i]); let h3 = $(number[i]).height()/3; scrollEvent[i] = ($(window).scrollTop() > ($(number[i]).offset().top - $(window).height() +h3)); if(scrollEvent[i] && blockStatus[i] == '0') { console.log(blockStatus[i]); blockStatus[i] = '1'; $({numberValue: n1}).animate({numberValue: n2}, { duration: 3000, easing: "swing", step: function(val) { let op = Math.ceil(val); op = numberWithSpaces(op,' '); $(digit_block[i]).html(''+op+''); } }); } }; }); $(window).scroll(); } },50); }); </script> 
Код доступен только тем, кто оплатил подписку
Подписка стоит 390р./мес.
Покупая подписку, ты получаешь доступ ко всем уникальным модификациям
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Подписка закончилась((
Нужно продлить, что бы получить доступ.
Так так так...
а этот генератор кода доступен только по подписке
Код доступен только тем, кто зарегистрирован
Зарегистрировавшись, ты получаешь доступ ко всем бесплатным модификациям
Made on
Tilda