Жидкий металл
Декоративный жидкий след для Zero Block: цепочка круглых форм плавно следует за курсором и сливается в единый пластичный силуэт.
Новый характер.
Двигайте курсор или коснитесь фона
Как работает жидкий металл
Девять форм последовательно догоняют друг друга. SVG-фильтр размывает их границы и повышает контраст прозрачности, объединяя соседние формы. Это визуальный эффект жидкого силуэта, а не физическая симуляция материала.
Подойдёт для короткого акцентного экрана креативной студии, дизайнера или fashion-проекта. След лучше разместить на тёмной подложке и оставить вокруг заголовка свободное пространство.
На телефоне и слабом устройстве
Без мыши след движется по спокойной автоматической траектории. На сенсорном экране он следует за точкой касания без запрета прокрутки.
Кадры не рисуются, когда блок вне экрана или вкладка скрыта. Количество элементов и разрешение ограничены. При включённом уменьшенном движении показывается статичный фон; касание меняет его положение без непрерывного движения.
Подберите эффект под свой дизайн
Настройки меняют этот пример. Цвета и параметры установки находятся в коде модификации. Настройка уменьшенного движения в системе отключает автоматическую анимацию.
| Параметр | Значение | Что меняет |
|---|---|---|
color | HEX, например #d4a73a | color меняет цвет всего жидкого силуэта; background задаёт подложку. Исходный акцент — золотой. |
background | HEX, например #0a0807 | Цвет подложки блока. |
speed | 0.1–3 | Скорость самостоятельного движения. 1 — исходный темп. |
intensity | 0.2–2 | Размер форм жидкого следа. |
Установка на Tilda
- Подготовьте Zero BlockСоздайте блок с текстом и кнопками. Проверьте его высоту на всех адаптивных разрешениях. Фон должен оставаться декоративным, а текст — читаемым.
- Добавьте HTML-элементВставьте элемент HTML и расположите его за остальным содержимым блока. Не добавляйте второй экземпляр эффекта в тот же HTML-элемент.
- Настройте размерыДля HTML-элемента выберите Window Container, задайте ширину и высоту 100%, расположите по центру по обеим осям. Проверьте размеры на мобильных разрешениях.
- Вставьте код модификацииВставьте целиком подготовленный HTML, CSS и JavaScript в HTML-элемент. В блоке настроек замените цвета и нужные параметры. Не вставляйте этот пакет в head: там нет контейнера фона.
- Опубликуйте страницуСохраните изменения и откройте опубликованную страницу. Работа JavaScript в редакторе не равнозначна работе на опубликованном сайте.
- Проверьте взаимодействиеНа компьютере двигайте курсор по блоку. На телефоне коснитесь блока и проверьте прокрутку. Нажмите все кнопки и ссылки поверх фона: декоративная анимация не должна мешать их работе.
Проверьте, что ваш тариф Tilda позволяет вставлять HTML-код. Не используйте position: fixed или отрицательный z-index для этой версии: её область — выбранный Zero Block.
Частые вопросы
Нужно ли менять идентификаторы блоков?
Нет. Эффект работает в собственном контейнере HTML-элемента. Несколько экземпляров из этого набора используют общий движок и отдельные настройки.
Можно ли поставить эффект в несколько блоков?
Да. Для каждого блока добавьте отдельный HTML-элемент. Начните с одного блока, проверьте производительность и затем добавляйте остальные.
Почему фон не виден?
Проверьте высоту HTML-элемента, опубликованную страницу и порядок слоёв. Убедитесь, что другой элемент не перекрывает фон сплошной заливкой. Фильтр SVG — часть модификации. Если удалить его из кода, формы перестанут сливаться. Не копируйте только видимую разметку без скрипта и блока фильтра.
Можно ли менять цвета?
color меняет цвет всего жидкого силуэта; background задаёт подложку. Исходный акцент — золотой. Цвет фона и скорость также настраиваются. Слишком яркий фон может мешать чтению — проверяйте контраст текста.
Подробнее в блоге
Как устроен жидкий курсорный эффект, где его использовать и что сохранить при установке в Zero Block.
Читать статью