Блог Perkova&Perkova

Уменьшение движения на сайте: спокойный вариант анимаций

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

Определите необязательные эффекты

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

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

Упростите настройки Zero Block

  1. Откройте элемент, который движется, и раздел Basic Animation.
  2. Проверьте Animation, Parallax и Fixing: это разные эффекты.
  3. Для необязательного движения отключите соответствующий эффект средствами редактора.
  4. Если есть пошаговая анимация, проверьте её отдельно: базовая настройка не заменяет её сценарий.
  5. Опубликуйте страницу и убедитесь, что текст и кнопки видны сразу и сохраняют положение.

Назначение базовых эффектов описано в официальной инструкции 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.

2025-05-23 10:00 Практика Tilda