Статья
Параллакс на сайте: когда эффект помогает, а когда мешает
Параллакс — эффект, при котором слои страницы двигаются при прокрутке с разной скоростью: фон медленнее, текст быстрее, и появляется ощущение глубины. Он делает сайт живым, но легко превращается в аттракцион, который тормозит на телефоне и укачивает часть посетителей. Разбираем, где параллакс уместен и как сделать его аккуратно.
Что это такое
Слово пришло из физики и астрономии: параллакс — кажущееся смещение близких предметов относительно далёких, когда смотришь с разных точек. На сайте этот принцип используют так:
- параллакс при прокрутке — фон движется медленнее содержимого, и страница кажется объёмной;
- параллакс за курсором — слои картинки чуть сдвигаются вслед за мышью;
- многослойные иллюстрации, которые «раскрываются» по мере прокрутки.
Где он уместен
| Уместен | Лучше без него |
|---|---|
| Лендинг-история, презентация продукта | Каталог, где ищут быстро |
| Портфолио, бренд, атмосфера: отель, ресторан | Длинные тексты, документы, условия |
| Один-два акцентных блока | Каждый блок страницы |
Параллакс — приправа, а не основное блюдо. О том, какие эффекты работают на бизнес, — статья «Тренды веб-дизайна 2026».
Как сделать аккуратно
- Один-два эффекта на странице, а не на каждом экране.
- Текст не уплывает, пока его читают: двигаться может фон, но не абзац.
- Лёгкие картинки — параллакс с тяжёлыми фото тормозит особенно заметно.
- Проверка на обычных телефонах, а не только на мощном компьютере.
- Уважение к «уменьшению движения». У части людей движение на экране вызывает головокружение и тошноту. Если в настройках телефона или компьютера включено уменьшение движения, эффект нужно отключать.
Скорость
Плохо сделанный параллакс заставляет браузер пересчитывать страницу на каждом движении колеса, и прокрутка начинает дёргаться. Хорошо сделанный двигает слои силами видеокарты и почти не нагружает страницу. Проверить, не стал ли сайт медленнее, можно по статье «Скорость загрузки сайта».
На конструкторах
В конструкторах параллакс обычно включается одной галочкой в настройках блока. Это удобно, но обязательно посмотрите результат на телефоне: эффект, красивый на компьютере, на мобильном может работать иначе или тормозить.
Как устроено у нас
На нашем сайте много движения при прокрутке, но если в настройках телефона или компьютера включено уменьшение движения, анимации появления текста и блоков отключаются.
Анимации и 3D в лендинге мы используем там, где они работают на задачу, а вёрстку делаем на коде, чтобы страница быстро загружалась на телефоне и медленном интернете.