← Все статьи

Туториалы

Отключи анимации, параллакс и автозапуск — более спокойная страница

15 мая 2026 · автор JustZix Team

Параллакс, дёргающийся на каждой прокрутке. Карусели, двигающиеся сами. Видео, запускающееся в автозапуске. Для одних это просто раздражитель, для других — реальная проблема (вестибулярные расстройства, утомление). Одно правило усмиряет движение на странице.

Три источника движения

• CSS-анимации и переходы — animation, transition.
• Плавная прокрутка и параллакс — scroll-behavior плюс эффекты, вычисляемые в JS.
• Автозапускающиеся видео — <video autoplay>.

CSS-правило — анимации и прокрутка

*, *::before, *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
html { scroll-behavior: auto !important; }

Мы используем 0.01ms вместо 0s намеренно: анимация всё ещё «происходит», поэтому код страницы, слушающий событие animationend, всё равно его получает и не застревает в ожидании. Для глаза движение исчезло.

JS-правило — остановить автозапуск видео

function stopVideos() {
  document.querySelectorAll('video').forEach(v => {
    v.removeAttribute('autoplay');
    if (!v.paused) v.pause();
  });
}
stopVideos();
new MutationObserver(stopVideos)
  .observe(document.body, { childList: true, subtree: true });

Лучше: уважать системное «уменьшить движение»

У твоей операционной системы есть настройка «уменьшить анимации». Страницы должны читать её через prefers-reduced-motion — но многие не делают этого. Если ты включил эту опцию в своей системе, это правило просто навязывает то, что страница не уважила.

Ловушки

• Часть анимации несёт смысл. Спиннер загрузки, сведённый к 0,01 мс, исчезает из вида — обычно безвредно, но имей в виду.
• Параллакс, вычисляемый в JS. Эффекты, сдвигающие фон скриптом при прокрутке, переживают CSS-правило. Тогда поможет только скрытие фонового слоя.
• Автозапуск возвращается после навигации SPA. Для этого MutationObserver стоит на страже.

Смотри также

• Примеры — сниппет для отключения анимаций
• Укроти sticky-элементы — ещё одно правило для более спокойной страницы
• Тёмная тема — визуальный комфорт

Установи JustZix — и сёрфи без танцующей страницы.