Слово из частиц в Tilda: сборка названия и разлёт перед открытием сайта

Небольшие частицы собираются в название, некоторое время держат форму букв, затем разлетаются. Для короткого бренда это способ сделать выразительное вступление без готового видеоролика.

В текущем варианте собирается текст. Поля для фотографии или SVG-логотипа нет. Число точек зависит от формы букв и шага сетки, поэтому длинное слово и очень плотная настройка могут заметно увеличить объём отрисовки.

Введите слово, выберите шрифт, размер относительно ширины экрана и расстояние между буквами. Если используется свой файл, сначала подключите его на сайте.

Проверьте название после загрузки настоящего шрифта. Его форма определяет расположение частиц, поэтому запасное начертание может дать другой рисунок. На телефоне важно прочитать слово целиком в собранном состоянии. Не выбирайте длинную фразу только ради большего числа точек: главный результат здесь — узнаваемая надпись, а не плотность движения по всей площади экрана.

Шаг сетки определяет расстояние между точками, из которых получается рисунок. Меньший шаг создаёт более плотную надпись и больше частиц. Размер задаёт величину каждой точки.

Если буквы слишком рыхлые, уменьшите шаг и подберите размер. Если точки сливаются, сравните оба значения, меняя их по одному. Не начинайте с самой плотной сетки: на мониторе она может выглядеть хорошо, а на слабом телефоне двигаться заметно тяжелее. Сначала найдите достаточную читаемость, затем решайте, нужны ли дополнительные частицы.

Цвет частиц слева и справа от центра задаётся отдельно. Сравните их с фоном в собранном слове и во время разлёта.

Для одноцветного варианта укажите одинаковые значения. Сборка и выход сохранятся. Если оттенки разные, убедитесь, что одна половина названия не исчезает на фоне. Не судите по одной яркой точке: цвет должен помогать прочитать всю форму. Две сильно разные половины не обязательны только потому, что конструктор предоставляет такую настройку.

Задайте время сборки, паузу и длительность разлёта. Разброс задержек определяет, насколько одновременно стартуют отдельные частицы. Большой разброс может сделать движение свободнее, но изменить момент, когда слово наконец собирается.

Просмотрите всю сцену и найдите участок, где название читается полностью. Если он слишком короткий, сначала увеличьте осмысленную паузу или уменьшите разброс. Подпись включается отдельно. Не заставляйте человека одновременно разбирать сложную сборку и читать длинное пояснение снизу.

Укажите максимальное время показа и при необходимости удержание анимаций Tilda. Сцена идёт по заданным длительностям после подготовки шрифта и не измеряет загрузку ресурсов страницы.

Скопируйте код в T123 в начале страницы и опубликуйте. Не нужно рисовать частицы в Zero Block или ставить второй загрузчик. Проверьте название, разлёт и прокрутку после выхода. На телефоне сравните обычное положение и поворот экрана: композиция должна оставаться понятной в реальных размерах страницы.

• Шрифт загружается правильно.
• Собранное слово читается целиком.
• Размер и шаг точек не делают рисунок чрезмерно плотным.
• Телефон справляется с движением без заметных рывков.
• После разлёта работают кнопки и прокрутка.

Проверьте также системное уменьшение движения. Зацикленное превью нужно для настройки; на открытом сайте заставка завершает показ. Если хочется увидеть её заново, проверяйте новую загрузку страницы, а не ждите очередного разлёта поверх содержимого.

Читайте также: Прорисовка слова в Tilda: текстовый прелоадер с контуром и заливкой · Прелоадер с дешифровкой текста в Tilda: название из случайных символов.