Прелоадер-эквалайзер в Tilda: полосы, счётчик и спокойное завершение

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

Это готовая анимация. Она не анализирует звук, не включает музыку и не запрашивает микрофон. Разберём геометрию полос и время выхода так, чтобы эффект хорошо выглядел и на мониторе, и на телефоне.

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

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

Для ширины можно задать своё значение или оставить 0 — автоматический вариант. Дополнительно предусмотрен верхний предел через CSS-значение. После настройки посмотрите реальный результат на узком экране.

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

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

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

Движение задано самим сценарием. Режима синхронизации с настоящим треком в текущем конструкторе нет. Если нужна реакция на аудиосигнал, потребуется отдельная реализация.

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

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

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

• Все полосы помещаются в экран.
• Промежутки остаются заметными.
• Счётчик и подпись читаются.
• Завершение не выглядит неожиданной остановкой.
• После заставки доступны кнопки и прокрутка.

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

Читайте также: Кольцевой прелоадер в Tilda: размер, заполнение и вращение · Бегущие строки перед загрузкой Tilda: текстовый прелоадер и выход лент.