Прелоадер «Матрица» в Tilda: дождь символов, название и индикатор

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

Знаки рисуются кодом на Canvas. Они не являются командами и не сообщают состояние сервера. Разберём, как подобрать рисунок дождя, сохранить читаемость названия и проверить движение на телефоне.

Доступны готовые наборы: катакана, цифры и знаки, их сочетание или латиница с цифрами. Сравните варианты при одинаковом размере, чтобы выбрать сам рисунок, а не только привычный образ «Матрицы».

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

Задайте фон, цвет потока и головного символа. Затем подберите размер знаков и прозрачность следа. Посмотрите, как сцена выглядит не только в начале, но и после нескольких проходов.

Длинный след делает рисунок плотнее и может затруднить чтение названия. Крупные знаки на телефоне воспринимаются иначе, чем на широком экране. Если фон становится слишком насыщенным, сначала сравните след и размер, затем меняйте цвет. Так проще понять, какая настройка создаёт лишнюю плотность.

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

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

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

Проверьте выбранный угол на телефоне. Индикатор не должен прижиматься к краю и сливаться с дождём. Проценты относятся к сценарию, а не к точному объёму загрузки файлов. Можно оставить одну короткую подпись или совсем убрать индикатор. Смысл вступления не зависит от обязательного присутствия числа на экране.

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

Вставьте код в T123 в начале страницы и опубликуйте. Оставьте один прелоадер. Дождитесь исчезновения дождя, затем нажмите первую кнопку и прокрутите сайт. На слабом телефоне проверьте плавность Canvas. Короткое вступление не должно превращаться в длительный тяжёлый фон, который мешает добраться до содержимого.

При системном уменьшении движения предусмотрен сокращённый сценарий со статичным кадром. Отсутствие полного дождя в таком режиме ожидаемо.

• Название читается поверх ярких символов.
• След не делает фон слишком плотным.
• Индикатор помещается на телефоне.
• Движение достаточно плавное.
• После выхода открыты кнопки и прокрутка.

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

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