О платформе

Тарифы

Загрузка...

Вход

Регистрация

Установить расширение

Апдейты

О НАС

КЛИЕНТАМ

РАБОТА

ПАРТНЁРАМ

СЛЕДИТЕ ЗА НАМИ

Главная

Тарифы

Отзывы

Модификации

Предложить идею

Заказать модификацию

Партнерская программа

ОТВЕТИМ НА ВОПРОСЫ
В ЧАТ-БОТЕ:

Вакансии

Сотрудничество

Расширение

Модификации

Профиль

дней

...

Апдейты

Установить расширение

Техподдержка

Как сделать анимацию цифр в зеро блоке 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

Сотрудников в команде

Самолётов в компании

Копировать код<!-- Как сделать анимацию цифр в зеро блоке 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>