Пиксельная мозаика в Tilda: как проявить название из крупных квадратов

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

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

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

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

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

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

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

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

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

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

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

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

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

• Готовое название читается целиком.
• Подпись заменена своим текстом.
• Счётчик не пересекается с надписями.
• На телефоне сохраняются удобные отступы.
• После выхода доступна вся страница.

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

Читайте также: Прелоадер из квадратов в Tilda: сборка сетки, цвета и выход · Градиентный прелоадер в Tilda: мягкие переливы, название и проценты.