Движение на странице должно поддерживать чтение, а не мешать ему. Параллакс, масштабирование и постоянное перемещение могут быть неудобны некоторым посетителям. Для спокойного варианта сначала уберите необязательные эффекты, затем отдельно настройте собственные анимации с учётом системного предпочтения уменьшенного движения.
Определите необязательные эффекты
В учебном примере страница студии содержит заголовок, движущиеся декоративные фигуры и кнопку обращения. Фигуры не передают необходимую информацию. Их можно оставить неподвижными, сохранив содержание и маршрут. Кнопке не нужен постоянный скачок, чтобы обозначать действие.
Не заменяйте большой эффект одним быстрым мельканием. Спокойное поведение означает меньшую необходимость отслеживать движение, а не просто меньшую длительность.
Упростите настройки Zero Block
- Откройте элемент, который движется, и раздел Basic Animation.
- Проверьте Animation, Parallax и Fixing: это разные эффекты.
- Для необязательного движения отключите соответствующий эффект средствами редактора.
- Если есть пошаговая анимация, проверьте её отдельно: базовая настройка не заменяет её сценарий.
- Опубликуйте страницу и убедитесь, что текст и кнопки видны сразу и сохраняют положение.
Назначение базовых эффектов описано в официальной инструкции Tilda. Для простого спокойного сайта не обязательно создавать две версии каждого блока: статичное содержание может быть основным вариантом для всех.
Собственный CSS: пример по системной настройке
Если небольшая анимация сделана вашей HTML-вставкой, ограничьте правило её классом. Учебный пример меняет цвет ссылки плавно при наведении, а при уменьшенном движении делает изменение мгновенным:
<style>
.pp-motion-demo { transition: color .25s; }
.pp-motion-demo:hover { color: #1748b5; }
@media (prefers-reduced-motion: reduce) {
.pp-motion-demo { transition: none; }
}
</style>
<a class="pp-motion-demo" href="/projects">Посмотреть проекты</a>Замените путь действующим адресом. Медиапризнак prefers-reduced-motion отражает предпочтение пользователя, описанное в MDN. Он не отключает автоматически сторонние видео и JavaScript-анимации Tilda. Для них проверяют реальный механизм отдельно.
Проверьте оба режима
Включите уменьшение движения в системе или эмуляцию такого предпочтения в инструментах браузера. Откройте опубликованную страницу и сравните поведение своего примера. Затем выключите режим и проверьте обычное состояние.
На телефоне просмотрите страницу при прокрутке и повороте экрана. Важные элементы не должны исчезать после отключения движения. Если собственный сценарий сначала скрывает текст и только анимация показывает его, переработайте исходное состояние: содержание должно оставаться доступным при отказе эффекта.
- Эффект остался: найдите его источник — базовый, пошаговый или собственный.
- Текст пропал: проверьте начальную прозрачность и скрытие.
- Дёргается вся страница: проверьте движение крупных контейнеров и фиксацию.
Продолжите с управлением каруселью и видимым фокусом. Для самостоятельного обучения изучите актуальные программы и условия в разделе курсов Perkova&Perkova.