Параллакс тильда - это эффект, при котором фон блока движется медленнее или быстрее контента поверх него при скролле, и страница получает ощущение объёма. За несколько лет работы с Tilda я ставил такой эффект на лендинги, сайты-визитки и промо-страницы курсов - иногда хватало галочки в настройках блока, иногда встроенный вариант тормозил на телефонах и эффект приходилось переписывать на JavaScript. Разберу оба способа и объясню, когда параллакс лучше вообще убрать со страницы.
Что такое параллакс-эффект и как он устроен в Tilda
Классический параллакс в вебе - это background-attachment: fixed на CSS, но такой фон криво ведёт себя в Safari на iPhone и тормозит на слабых Android. Поэтому Tilda реализует эффект по-другому: скрипт платформы слушает событие scroll и пересчитывает background-position фонового изображения с коэффициентом смещения. Визуально это тот же параллакс, но технически - постоянная перерисовка фона при каждом кадре прокрутки.
Работает эффект только для фоновых картинок в режиме «Обложка» (Cover) - для обычной картинки, вставленной как элемент блока, настройки параллакса в интерфейсе Tilda просто не появится. Доступен он для блоков с полноэкранным фоном: T001, T005, T450, T595, Zero Block с включённой обложкой секции и некоторые другие.
Чаще всего параллакс просят поставить на первый экран (hero) - заголовок и кнопка на переднем плане, фон с фотографией офиса, продукта или команды двигается медленнее при скролле. Второй частый случай - блок «О компании» или «Наши преимущества» на длинных лендингах инфопродуктов, где эффект используют для оживления однообразной сетки карточек.
Как включить параллакс на Tilda встроенными настройками блока
Без единой строчки кода эффект ставится за пару минут:
- Откройте настройки блока (иконка шестерёнки) и перейдите на вкладку «Обложка».
- Загрузите фоновое изображение и выберите режим заливки «Cover» вместо «Background» - параллакс работает только с обложкой.
- Включите переключатель «Параллакс» - он появляется в панели только для полноэкранных блоков с фоном-обложкой.
- Проверьте предпросмотр на мобильном устройстве в редакторе - для части блоков Tilda сама отключает эффект на мобильной версии, для части оставляет как есть.
Перед загрузкой фонового изображения я всегда сжимаю его до 150-250 КБ в WebP - параллакс-скрипт Тильды пересчитывает позицию фона на каждый кадр скролла, и на тяжёлой картинке в 2-3 МБ это ощутимо подвисает даже на новых телефонах.
Ограничение встроенного варианта простое: один слой, фиксированная скорость смещения, нет управления направлением и нет привязки к движению мыши. Для баннера с одной фотографией этого достаточно, для более сложной композиции - нет.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Кастомный скрипт параллакса, когда встроенных настроек мало
Кастомный вариант я подключаю, когда клиенту нужен мультислойный параллакс (несколько картинок движутся с разной скоростью - например, облака медленнее, силуэт горы быстрее), параллакс от движения мыши на десктопе, эффект на обычной картинке, а не только на фоне-обложке, или включение эффекта только при появлении блока во вьюпорте.
Пример рабочего куска для Zero Block - блок с несколькими слоями и атрибутом data-speed на каждом:
const layers = document.querySelectorAll('.parallax-layer');
let ticking = false;
function updateParallax() {
const scrollY = window.scrollY;
layers.forEach((layer) => {
const speed = parseFloat(layer.dataset.speed) || 0.3;
const offset = scrollY * speed;
layer.style.transform = `translate3d(0, ${offset}px, 0)`;
});
ticking = false;
}
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(updateParallax);
ticking = true;
}
}, { passive: true });
Смысл в двух вещах. Первая - вместо background-position меняю transform: translate3d, это композитинг на GPU, а не перерисовка слоя на каждый кадр, и на слабых Android разница по нагрузке на процессор заметна сразу. Вторая - requestAnimationFrame и флаг ticking убирают лишние вызовы функции: событие scroll может стрелять десятками раз в секунду, а пересчитывать позицию нужно один раз за кадр.
Для эффекта от движения мыши логика похожая, но событие другое - mousemove вместо scroll, а смещение слоя считается от координат курсора относительно центра блока, а не от scrollY. Такой вариант ставлю на десктопные hero без мобильной версии эффекта: на touch-устройствах события mousemove нет, поэтому там всегда остаётся статичный фон или обычный scroll-parallax.
Скрипт вставляется в код блока Zero Block (T123) или в «Ещё» → «Вставка кода» на уровне страницы, если слоёв несколько и они лежат в разных блоках. На комплексные интеграции - несколько анимированных слоёв, разная логика для десктопа и мобильной версии, синхронизация с другими анимациями на странице - обычно закладываю от 40 000 ₽, на точечную доработку одного блока - от 3 000 ₽.
Когда параллакс тильда мешает - просадки на мобильных и Core Web Vitals
На бюджетном Android со средним процессором встроенный параллакс Тильды на тяжёлом фоне даёт просадку FPS при скролле до 20-25 кадров вместо плавных 60 - глазом это читается как рывки и подтормаживание страницы целиком, не только фона. На iOS Safari похожая история: браузер перерисовывает background-position при каждом кадре, и на длинной странице с параллаксом в 5-6 блоках скролл начинает «заикаться» уже на iPhone не самой старой линейки.
Отдельная проблема - LCP. Фон hero-блока с параллаксом чаще всего и есть самый крупный элемент на первом экране, то есть именно он считается Largest Contentful Paint. Если картинка не сжата и эффект начинает пересчитывать позицию до полной загрузки, LCP на мобильном отчёте PageSpeed Insights у меня на таких проектах растягивался на 1.5-2 секунды дольше, чем на той же странице без параллакса.
На одном лендинге для курса, где параллакс стоял в 6 из 8 блоков подряд, мобильный балл PageSpeed Insights держался на уровне 35-40 из 100. После переноса параллакса только в hero и отказа от эффекта в остальных блоках балл поднялся до 65-70, а в A/B‑тесте страница без параллакса в первом экране грузилась на 1.3 секунды быстрее и давала на 8-12% больше заявок с формы - при том же трафике и одинаковом офере.
Дополнительная сложность - параллакс редко стоит в одиночку. Обычно на той же странице уже висят виджеты форм, счётчики Метрики, кастомные попапы. Каждый скрипт добавляет свой обработчик событий и лишний JS в общий вес страницы, и параллакс в этой связке часто становится последней каплей, из-за которой скролл начинает подвисать заметно для пользователя.
Есть ещё момент с доступностью: у части посетителей параллакс-анимация вызывает дискомфорт вплоть до головокружения - вестибулярную чувствительность к движению фона никто не отменял. Встроенный эффект Тильды не проверяет системную настройку prefers-reduced-motion, так что на сайте с параллаксом такие пользователи получают эффект принудительно, даже если в операционной системе анимации у них отключены.
Как ускорить страницу с параллаксом на Tilda
Набор приёмов, которые реально снижают нагрузку без отказа от эффекта:
- Сжимать фон в WebP до 150-250 КБ - тяжёлая картинка тормозит параллакс сильнее, чем сам скрипт.
- В кастомных скриптах использовать transform: translate3d вместо background-position - GPU-композитинг вместо перерисовки слоя.
- Отключать эффект на мобильных через matchMedia(‘(max-width: 768px)’) - на маленьком экране параллакс почти не заметен визуально, а нагрузку на процессор даёт заметную.
- Учитывать prefers-reduced-motion и убирать transform-анимацию для пользователей с этой системной настройкой.
- Не ставить эффект на изображение, которое одновременно и есть LCP-элемент страницы - грузить его статично, а параллакс переносить на второй-третий блок.
- Использовать IntersectionObserver, чтобы скрипт не пересчитывал transform для блоков за пределами вьюпорта.
Часть этих доработок собираю не с нуля каждый раз, а адаптирую заготовки - в библиотеке готовых скриптов для Tilda у меня лежат отдельные модули с уже оптимизированным параллаксом на IntersectionObserver и отключением на мобильных, и по времени доработка блока под конкретный дизайн выходит быстрее, чем писать логику заново.
Что выбрать: встроенный параллакс, кастомный скрипт или отказ от эффекта
| Критерий | Встроенный параллакс Tilda | Кастомный скрипт | Без параллакса |
|---|---|---|---|
| Время внедрения | 3-5 минут | от нескольких часов | 0 |
| Гибкость | один слой, фиксированная скорость | мультислой, направление, реакция на мышь | - |
| Влияние на LCP | умеренное на тяжёлом фоне | контролируемое, можно оптимизировать под задачу | минимальное |
| Поведение на мобильных | зависит от типа блока, не всегда отключается | настраивается вручную, можно выключить полностью | без ограничений |
| Стоимость доработки | входит в тариф Tilda | от 3 000 ₽ за блок, от 40 000 ₽ за комплексную интеграцию | 0 |
| Когда уместно | простой hero с одной фотографией | фирменный эффект, несколько связанных слоёв | интернет-магазины, формы, страницы с приоритетом на скорость |
На простых визитках без форм оплаты и калькуляторов чаще ставлю встроенный вариант - конверсионной нагрузки там нет, а эффект работает на первое впечатление. На лендингах с оплатой через эквайринг или формой заявки в hero всё чаще советую вообще убрать параллакс с первого экрана - там на счету каждая десятая доля секунды до появления кнопки действия.
На проектах, где делаю сайт на Tilda с нуля (от 30 000 ₽), решение по параллаксу принимаю не в редакторе на десктопном мониторе, а после проверки на паре реальных телефонов - картинка на широком экране и ощущение от того же эффекта под пальцем на скролле часто расходятся сильно.
Когда стандартных блоков не хватает
Кастомный скрипт
от 3 000 ₽
Подробнее →Частые вопросы
Параллакс на Tilda замедляет загрузку сайта?
Сам по себе скрипт эффекта весит немного, проблему обычно создаёт несжатое фоновое изображение и большое количество блоков с параллаксом подряд. Встроенный эффект на одном оптимизированном фоне почти не влияет на скорость, а вот 5-6 блоков с параллаксом на тяжёлых картинках просаживают мобильный балл PageSpeed Insights на 20-30 пунктов.
Работает ли параллакс на мобильных в Tilda?
Зависит от типа блока - для части блоков Тильда автоматически отключает эффект в мобильной версии верстки, для части оставляет его активным. Проверять нужно в предпросмотре на реальном телефоне, а не только в режиме «мобильная версия» редактора - рендер в браузере компьютера не всегда совпадает с поведением на устройстве.
Сколько стоит кастомный параллакс-скрипт для Tilda?
Точечная доработка одного блока - один-два слоя, привязка к существующей секции - от 3 000 ₽. Комплексная интеграция с несколькими анимированными слоями, отдельной логикой для мобильной версии и синхронизацией с другими эффектами на странице - от 40 000 ₽.
Можно ли сделать параллакс без программиста, только настройками Тильды?
Да, для полноэкранных блоков с фоном в режиме «Обложка» переключатель параллакса встроен в панель настроек и не требует кода. Ограничение - один слой и фиксированная скорость смещения, для мультислойного эффекта или реакции на движение мыши нужен уже кастомный скрипт.