РАЗДЕЛ 01Что такое параллакс простыми словами
Слово пришло из астрономии и оптики. Параллакс это кажущееся смещение предмета, когда вы смотрите на него с разных точек. Вытяните руку с поднятым пальцем и посмотрите на него по очереди левым и правым глазом: палец «прыгает» на фоне стены. Чем ближе предмет, тем сильнее он смещается. Этим пользуются астрономы, когда меряют расстояние до ближних звёзд.
Откуда эффект взялся в дизайне
Из того же наблюдения. Когда вы едете в поезде, столбы у дороги проносятся быстро, деревья в поле медленнее, а горы на горизонте почти стоят. Мозг считывает разницу скоростей как глубину. В 2D-играх это давно используют: фон рисуют несколькими слоями, и дальние двигаются медленнее ближних.
Что такое параллакс на сайте
На сайте то же самое делают при прокрутке. Текст едет вверх с обычной скоростью, а фоновая картинка медленнее, или наоборот, отдельные элементы быстрее. Получается ощущение объёма на плоском экране. По-английски эффект называется parallax или parallax scrolling, в запросах встречается и с ошибкой «паралакса».
РАЗДЕЛ 02Эффект параллакса на сайте: какие бывают варианты
Под одним словом прячутся разные приёмы, и по нагрузке на страницу они сильно отличаются.
Листайте вбок
| Вариант | Как выглядит | Нагрузка на страницу |
|---|---|---|
| Фон отстаёт от текста | картинка в блоке двигается медленнее прокрутки | низкая, если сделано на CSS |
| Фиксированный фон | фон стоит, контент едет поверх | низкая, но на iPhone часто не работает |
| Многослойная сцена | 3-5 слоёв с разной скоростью, «окно» в глубину | средняя и высокая |
| Параллакс по движению мыши | элементы смещаются за курсором | средняя, на телефоне не работает |
| Анимации по скроллу | элементы выезжают, крутятся, меняют размер | средняя или высокая |
Почему это важно для бизнеса
Владелец сайта обычно говорит «хочу как у Apple», а под этим понимает пятый вариант. Он самый тяжёлый и самый рискованный для посадочной под рекламу. Первые два варианта почти ничего не стоят по скорости и дают тот самый «дорогой» вид.
РАЗДЕЛ 03Как параллакс устроен технически
Чтобы обсуждать эффект с разработчиком, хватает понимания трёх подходов.
Фон на CSS
Самый простой способ: фону блока задают свойство background-attachment: fixed. Фон остаётся на месте, контент едет поверх. Браузер делает это сам, скрипты не нужны. Минус: мобильный Safari на iPhone это свойство не поддерживает так же, как компьютерные браузеры, и на телефоне фон просто прокручивается вместе с блоком. Эффект пропадает, хотя страница не ломается.
Сдвиг слоёв через transform
Второй способ: скрипт или чистый CSS двигает слои через transform: translate. Браузер умеет такие сдвиги считать на видеокарте, поэтому прокрутка остаётся плавной. Хорошая реализация двигает только transform и opacity.
Скрипты, которые двигают всё подряд
Плохая реализация на каждый пиксель прокрутки меняет отступы, высоту или положение фона через скрипт. Браузеру приходится пересчитывать всю страницу, и на слабом телефоне прокрутка начинает дёргаться. Именно такие сборки дают репутацию «параллакс тормозит».
Что спросить у разработчика
- на чём сделан эффект: CSS или скрипт, и какой библиотекой;
- что двигается:
transformили отступы и позиция фона; - что видит пользователь на iPhone и на старом Android;
- выключается ли эффект при системной настройке «уменьшить движение».
РАЗДЕЛ 04Когда параллакс помогает
Эффект работает там, где человек пришёл смотреть и разбираться, а не быстро оставить заявку.
Имиджевые сайты и запуск продукта
Страница бренда, презентация нового продукта, сайт жилого комплекса. Человек листает историю, глубина и движение помогают удержать внимание и показать товар с разных сторон. Здесь параллакс часть сюжета.
Портфолио и креативные студии
Дизайнеру, архитектору, фотографу эффект показывает, что он умеет работать с подачей. Посетитель портфолио оценивает в том числе сам сайт.
Длинные статьи и спецпроекты
В лонгриде лёгкий параллакс на обложках глав разбивает текст и даёт паузу. Главное тут слово «лёгкий»: эффект на фоне, а не на тексте, который человек читает.
РАЗДЕЛ 05Когда параллакс вредит конверсии
На посадочной под Директ или таргет у человека другая задача. Он кликнул на объявление и за несколько секунд решает, туда ли попал. Всё, что мешает увидеть оффер, цену и кнопку, стоит денег.
Тормозит на телефоне
Большая часть рекламного трафика приходит с телефонов, и далеко не все они свежие. Многослойная сцена, которая летает на ноутбуке дизайнера, на бюджетном телефоне через мобильный интернет грузится дольше и дёргается при прокрутке. Человек закрывает страницу, а вы платите за клик.
Сдвигает элементы
Если эффект меняет размеры и положение блоков, кнопка «уезжает» из-под пальца. Человек промахивается, раздражается, уходит.
Отвлекает от формы
Движение притягивает взгляд сильнее текста. Если рядом с формой что-то плавает, глаз идёт туда, а не к полям. На посадочной всё внимание должно вести к офферу и кнопке.
Укачивает
У части людей сильное движение на экране вызывает головокружение и тошноту. Для этого в iOS, macOS, Android и Windows есть настройка уменьшения движения, а браузер передаёт её сайту через prefers-reduced-motion. Если сайт её игнорирует, вы теряете этих людей.
Листайте вбок
| Ситуация | Параллакс | Почему |
|---|---|---|
| Имиджевый сайт бренда | да, умеренно | человек пришёл смотреть |
| Презентация продукта | да | движение показывает товар |
| Портфолио | да | сайт сам по себе работа |
| Посадочная под Директ | только лёгкий фон, не на первом экране | человеку нужен оффер за секунды |
| Квиз и форма заявки | нет | любое движение мешает заполнять |
| Карточка товара в магазине | нет | важны фото, цена и кнопка |
РАЗДЕЛ 06Параллакс и скорость: что смотреть в цифрах
Поисковики и рекламные системы оценивают страницу по скорости и стабильности. Параллакс задевает сразу несколько показателей Core Web Vitals.
LCP: скорость главного экрана
Если первый экран это большая картинка с параллаксом и несколько слоёв поверх, браузер грузит их все до того, как покажет главное. Чем тяжелее сцена, тем позже человек увидит заголовок.
CLS: сдвиги макета
Эффект, который меняет размеры блоков, даёт сдвиги макета. Это ровно то, за что Google снижает оценку страницы, и то, из-за чего кнопка уезжает из-под пальца.
INP: отклик на действия
Скрипт, который пересчитывает страницу на каждом движении прокрутки, занимает браузер. Нажатие на кнопку обрабатывается с задержкой, и человек думает, что сайт завис.
Как проверить эти показатели и что считать нормой, я разбирал в отдельной статье про скорость загрузки сайта. Если сайт уже медленный, параллакс только добавит проблем.
РАЗДЕЛ 07Как сделать параллакс на Тильде
На Тильде эффект собирается без кода в Zero Block.
Настройки параллакса в Zero Block
По справке Тильды (проверка 11.10.2026) у элемента в Zero Block есть базовая анимация с тремя группами настроек: Animation (появление), Parallax и Fixing (фиксация). Параллакс бывает двух видов:
- по скроллу. Настройка Speed: меньше 100% элемент едет медленнее прокрутки, больше 100% быстрее;
- по движению мыши. Задаётся максимальное смещение по осям X и Y.
Как я бы настроил на посадочной
Скорость в пределах 80-90% только для фоновой картинки, не на первом экране, без параллакса по мыши: на телефоне его нет, а на компьютере он отвлекает. Тексты, кнопки и форму не анимировать вообще. Как собрать саму страницу, есть в инструкции как сделать сайт на Тильде.
РАЗДЕЛ 08Как сделать параллакс без вреда: чек-лист
Если без эффекта никак, вот правила, при которых он не мешает заявкам.
Листайте вбок
| Правило | Зачем |
|---|---|
| Первый экран без тяжёлой сцены | заголовок и оффер появляются сразу |
| Двигается только фон | текст и кнопки на месте, их легко читать и нажимать |
Анимируется только transform и opacity | прокрутка плавная на слабых телефонах |
Учитывается prefers-reduced-motion | людям, которых укачивает, эффект не показывается |
| Проверка на iPhone и дешёвом Android | вы видите то, что видит клиент |
| Картинки сжаты и в современном формате | слои не тянут мегабайты |
| Форма и квиз без анимаций | ничего не отвлекает от заполнения |
Простой тест «на пальце»
Откройте страницу с телефона через мобильный интернет, а не по Wi-Fi в офисе. Засеките, через сколько секунд видны заголовок и кнопка. Прокрутите до формы и заполните её одной рукой. Если хоть что-то дёрнулось или уехало, эффект пока мешает.
РАЗДЕЛ 09Как проверить, что эффект не съедает заявки
Мнение дизайнера и владельца тут не аргумент. Аргумент это заявки.
A/B-тест версий
Сделайте копию посадочной без параллакса и разделите трафик пополам. Две-три недели при нормальном объёме трафика дают понятную разницу в конверсии. Как считать конверсию и сколько данных нужно для вывода, разобрано в статье про расчёт конверсии.
Вебвизор и карта скроллинга
В Яндекс Метрике посмотрите записи визитов с телефонов и карту скроллинга. Если люди уходят на блоке с эффектом или долго дёргают страницу на месте, это сигнал.
Отказы с мобильных
Сравните отказы с мобильных и с компьютеров на одной странице. Большой разрыв часто означает, что на телефоне что-то тормозит или ломается.
Красота и продажи
Я не против эффектов. Против я тогда, когда за них платит рекламный бюджет. Посадочную под рекламу я собираю из того, что ведёт к заявке: понятный оффер, цена, доказательства, короткая форма. Как подавать сам товар, чтобы он продавал без спецэффектов, я разбирал в статье про рекламу товаров.
РАЗДЕЛ 10FAQ
Отвечает Никита МорозовЧто такое параллакс простыми словами?
Это кажущееся смещение предмета, когда смотришь на него с разных точек. На сайте так называют эффект, при котором фон и передний план двигаются с разной скоростью при прокрутке, и появляется ощущение глубины.
Параллакс замедляет сайт?
Лёгкий параллакс фона на CSS почти не влияет на скорость. Многослойные сцены и скрипты, которые пересчитывают страницу при прокрутке, заметно замедляют её на слабых телефонах.
Почему параллакс не работает на iPhone?
Часто эффект сделан через фиксированный фон background-attachment: fixed, а мобильный Safari обрабатывает его иначе, чем компьютерные браузеры. Фон просто прокручивается вместе с блоком.
Нужен ли параллакс на посадочной под рекламу?
Чаще нет. Если очень хочется, то только лёгкий эффект на фоне ниже первого экрана, без движения текста, кнопок и формы, с проверкой на телефонах.
Как сделать параллакс на Тильде?
В Zero Block выделите элемент, откройте базовую анимацию и выберите Parallax: по скроллу с настройкой скорости или по движению мыши со смещением по осям.
Влияет ли параллакс на SEO?
Напрямую нет. Косвенно да: если эффект ухудшает скорость и стабильность страницы, это сказывается на оценке страницы поисковиками и на поведении посетителей.
Как понять, что параллакс мешает заявкам?
Сделайте версию страницы без эффекта и запустите A/B-тест. Параллельно посмотрите Вебвизор и отказы с мобильных устройств в Метрике.
РАЗДЕЛ 11С чего начать
- Откройте свою посадочную с телефона через мобильный интернет и засеките, когда видны заголовок и кнопка.
- Выпишите все анимации на странице и уберите те, что на первом экране и рядом с формой.
- Попросите разработчика проверить, что эффект выключается при настройке «уменьшить движение».
- Если сомневаетесь, запустите A/B-тест версии без параллакса.
- Сравнивайте не впечатление, а заявки и отказы с мобильных.
Пришлите посадочную, и я покажу, что на ней мешает человеку из рекламы оставить заявку.