URL скопирован в буфер обмена!
Как сделать анимацию роста чисел в Zero Block?
Модификация добавляет анимацию увеличения значения числа в Zero Block. Можно настроить скорость анимации и задавать префикс и суффикс для числа. Работает на мобилках!
Модификация обновлена. Добавлена возможность реверса. При его активации анимация выполняется в обратном направлении — от заданного числа к нулю.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Время анимации
Символ разделителя числа
Реверс
Настройки числа
Класс числа
Финальное значение числа
Текст до числа
Текст после числа
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD043--><script>
$(document).ready(function() {
let tiTime = 3000;
let reverse = false;
function TiCodeNumberAnim(element, number, prefix, suffix) {
let tiBlock = $('.' + element + ' .tn-atom');
let tiDistance = 10;
let duration = tiTime;
let statusAnim = function() {
let scrollEvent = (
$(window).scrollTop() > (tiBlock.offset().top - $(window).height() + tiDistance)
);
if (scrollEvent && !tiBlock.hasClass('animated')) {
tiBlock.addClass('animated');
$({ numberValue: reverse ? number : 0 }).animate(
{ numberValue: reverse ? 0 : number },
{
duration: duration,
easing: "swing",
step: function(val) {
let formattedNumber = String(Math.ceil(val))
.replace(/(\d)(?=(\d{3})+([^\d]|$))/g, '$1 ');
tiBlock.html(prefix + formattedNumber + suffix);
}
}
);
}
};
if (tiBlock.length > 0) {
statusAnim();
$(window).scroll(function() {
statusAnim();
});
}
}
TiCodeNumberAnim('ti-num1', 100000, 'Оборот ', ' руб');
TiCodeNumberAnim('ti-num2', 0, '', '');
TiCodeNumberAnim('ti-num3', 0, '', '');
TiCodeNumberAnim('ti-num4', 0, '', '');
TiCodeNumberAnim('ti-num5', 0, '', '');
TiCodeNumberAnim('ti-num6', 0, '', '');
TiCodeNumberAnim('ti-num7', 0, '', '');
TiCodeNumberAnim('ti-num8', 0, '', '');
TiCodeNumberAnim('ti-num9', 0, '', '');
TiCodeNumberAnim('ti-num10', 0, '', '');
$(window).on('scroll', function() {
$('.text-btn').each(function() {
if ($(window).scrollTop() > ($(this).offset().top - $(window).height())) {
$(this).addClass('animate');
}
});
});
});
</script>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем текст в Zero Block и присваиваем ему класс ti-num1
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Вместо текста пишем число до которого будет происходить рост. Такое же число пишем в генератор кода в поле "Финальное число". Например, если написать 1000, то анимация будет идти с нуля до 1000;
3. Указываем дополнительные настройки в генераторе кода:
Время анимации - указываем время(в мс.) за которое будет происходить рост чисел.
Тип разделителя - изначально числа отделяются пробелом по три символа. Можно указать другой разделитель или вообще убрать.
Реверс - если включено, то анимация выполняется в обратном направлении — от заданного числа к нулю;
Текст перед числом - указываем текст который будет отображаться перед числом. Для того чтобы между текстом и числом был отступ, добавляем пробел в тексте. Если просто ввести текст, то отступа не будет;
Текст после числа - при необходимости указываем текст который будет отображаться после числа. Для добавления отступа добавляем пробел перед вводом текста. Если просто ввести текст, то отступа не будет;
Добавить число - добавляем еще одно число с анимацией.
3. Копируем готовый код и вставляем в HTML блок Т123.
Примечание! Если указывали текст в поле "Текст перед числом" и "Текст после числа", то в Zero Block расширьте фрейм текста чтобы был запас. Если оставить мало места, текст будет перепрыгивать на второю строку.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Вместо текста пишем число до которого будет происходить рост. Такое же число пишем в генератор кода в поле "Финальное число". Например, если написать 1000, то анимация будет идти с нуля до 1000;
3. Указываем дополнительные настройки в генераторе кода:
Время анимации - указываем время(в мс.) за которое будет происходить рост чисел.
Тип разделителя - изначально числа отделяются пробелом по три символа. Можно указать другой разделитель или вообще убрать.
Реверс - если включено, то анимация выполняется в обратном направлении — от заданного числа к нулю;
Текст перед числом - указываем текст который будет отображаться перед числом. Для того чтобы между текстом и числом был отступ, добавляем пробел в тексте. Если просто ввести текст, то отступа не будет;
Текст после числа - при необходимости указываем текст который будет отображаться после числа. Для добавления отступа добавляем пробел перед вводом текста. Если просто ввести текст, то отступа не будет;
Добавить число - добавляем еще одно число с анимацией.
3. Копируем готовый код и вставляем в HTML блок Т123.
Примечание! Если указывали текст в поле "Текст перед числом" и "Текст после числа", то в Zero Block расширьте фрейм текста чтобы был запас. Если оставить мало места, текст будет перепрыгивать на второю строку.
30k+
Clients
50%
Net Profit
15+
Years of experience
*Для просмотра анимации обновите страницу
