Перейти к содержимому
Забрать бесплатно
Модификации выключены. Так эта страница выглядит на обычной Тильде.
РАЗДЕЛ КАТАЛОГА · КОД ОТКРЫТ

Анимация текста на Тильде: что она умеет сама и где предел

Анимация текста в Тильде есть в двух местах: стили анимации у элемента Zero Block и отдельный стиль «animatednumber» для чисел. Оба работают, у обоих есть граница, и граница у чисел жёсткая: вызов стоит под условием ширины экрана от 1200 пикселей, то есть на телефоне и планшете число просто стоит на месте. Здесь собрано, что в разделе есть у нас, и чем оно отличается от родного поведения.

СОБРАНО
4 мода
ОБЪЯВЛЕНО
0 модов
БЛОКИ ТИЛЬДЫ
7
РАЗБОРОВ
9
Собрано 4 КОД ОТКРЫТ · ПРОВЕРЕН НА ЖИВОЙ ТИЛЬДЕ

Моды раздела, у которых есть код

Сверка с кодом Тильды ИМЕНА ФУНКЦИЙ — ЧТОБЫ МОЖНО БЫЛО ПРОВЕРИТЬ

Что из этого Тильда делает сама

У этого раздела родной аналог в Тильде есть, и он не бесполезен — важно, где он заканчивается.

MOD-041 · Проявление текста по скроллу
ДЕЛАЕТ САМА

Анимирует появление целого текстового элемента Zero Block при входе в экран.

ГДЕ ЭТО В РАНТАЙМЕ

Настройки анимации элемента; исполняет `tilda-animation-2.0.min.js`.

ЧЕГО В РОДНОЙ ВЕРСИИ НЕТ

Тильда не разбивает текст на строки и не запускает их каскадом внутри одной секции. Мод делает именно это, при этом пропускает элементы, чьей анимацией уже владеет Тильда.

MOD-077 · Анимация чисел
ДЕЛАЕТ САМА

Считает число до значения, взятого из самого текста, когда элемент входит в экран. Разряды и дробную часть держит, окружающие слова не трогает.

ГДЕ ЭТО В РАНТАЙМЕ

Стиль анимации «animatednumber» у элемента: `t_animate__parseNumberText` подставляет ноль и запоминает исходную строку, `t_animate__animateNumbers` её отсчитывает. Оба в `tilda-animation-2.0.min.js`.

ЧЕГО В РОДНОЙ ВЕРСИИ НЕТ

Только на экране от 1200 px: вызов стоит под `document.documentElement.clientWidth >= 1200`, и это единственное место, откуда он идёт, — на телефоне и планшете число просто стоит на месте. Длительность зашита: 108 шагов по 12 мс, около 1,3 с. Старт всегда с нуля, задержки между несколькими числами нет, `prefers-reduced-motion` не спрашивается — в файле анимации его нет ни одного упоминания. И ставится он элементу поштучно, а не секции целиком.

MOD-183 · Аккуратный текст по ширине
ДЕЛАЕТ САМА

Zero Block хранит режим автоподбора текста в data-field-textfit-value и сам исправляет размеры шрифта и интерлиньяж на брейкпоинтах.

ГДЕ ЭТО В РАНТАЙМЕ

`data-field-textfit-value`, `t396__fixElementsFontSizes` и `t396__fixElementsLineHeights` в `tilda-zero-1.1.min.js`.

ЧЕГО В РОДНОЙ ВЕРСИИ НЕТ

Отдельной настройки русских переносов и безопасного justify для выбранных абзацев нет; сочетание justify с autowidth требует явного отказа.

MOD-187 · Таймер из отдельных элементов Zero Block
ДЕЛАЕТ САМА

Zero Block сохраняет типографику каждого текстового элемента и пересчитывает её на адаптивах.

ГДЕ ЭТО В РАНТАЙМЕ

Текстовые `.tn-atom` и функции коррекции размеров в `tilda-zero-1.1.min.js`.

ЧЕГО В РОДНОЙ ВЕРСИИ НЕТ

Штатного счётчика, который распределяет один дедлайн по независимым элементам Zero Block, в снятом рантайме нет.

@BUTON_SUPPORT

Нужно то, чего в разделе нет?

Опишите, что должно происходить на странице. Ответим, делается ли это настройками Тильды — тогда подскажем бесплатно, — или нужен код, и во что он укладывается.

Написать в телеграм Мод под задачу
ПН–ПТ 10:00–20:00 МСК · СБ 12:00–18:00