Параллакс в Тильде: как добавить эффект в отдельном блоке

Параллакс в Тильде из коробки работает в двух местах: в настройках блока Cover, где он ограничен фоновой картинкой на всю ширину экрана, и в анимации элементов Zero Block по скроллу и движению мыши. Как только эффект прокрутки нужен внутри обычного контентного блока: в карточке, в середине лендинга, на изображении внутри готового T‑блока, встроенных настроек уже не хватает. За практику с Tilda-скриптами я делал параллакс и через нативный Cover, и через самописный JS для произвольных зон, ниже разбираю оба варианта с кодом и показываю, где они ломаются на мобильных.

Чаще всего запрос звучит так: на лендинге уже стоит Cover с параллаксом на первом экране, а клиент просит повторить тот же эффект на баннере акции в середине страницы интернет-магазина или на блоке с отзывами. Там штатной галочки нет, и разработчику приходится либо переубеждать заказчика, либо собирать эффект вручную.

Что такое параллакс-эффект и когда он оправдан в блоке

Параллакс держится на разнице скоростей: фон сдвигается медленнее или быстрее контента поверх него, из-за чего на плоской странице появляется ощущение глубины. В вебе его чаще всего реализуют тремя способами: через background-attachment: fixed, через сдвиг слоя transform: translateY при скролле или через готовую библиотеку вроде Rellax.

На лендингах эффект уместен в первом экране с крупной фотографией, в блоке «О компании» с иллюстрацией на фоне текста, в галерее кейсов, где карточки едут с разной скоростью. Вешать параллакс на каждый второй блок подряд не советую: на слабых телефонах это ощутимо тормозит скролл, а на позиции в поиске эффект никак не влияет, только на восприятие страницы посетителем.

Встроенный параллакс-скроллинг в блоке Cover

В Тильде параллакс из коробки прячется в настройках блока-обложки: T005-T010 и большинство блоков категории Cover. Открываю блок, иду в настройки через шестерёнку, вкладка «Фон», там переключатель «Параллакс». Тильда сама накладывает эффект на фоновую картинку через собственный скрипт, вручную ничего писать не нужно.

Ограничение простое: переключатель есть только у блоков-обложек, где фон растянут на всю ширину экрана. У обычных текстовых блоков или блоков с товарами такой настройки нет вообще, потому что там нет единого полноширинного фонового изображения, за которое можно зацепиться.

Второе ограничение: на мобильных Тильда отключает параллакс автоматически, потому что background-attachment: fixed в Safari на iOS ведёт себя нестабильно, картинка может дёргаться или пропадать при скролле. Это осознанное решение платформы, а не баг вёрстки, поэтому жаловаться в поддержку Тильды на «параллакс не работает на телефоне» смысла нет.

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

Ещё нюанс: параллакс в Cover привязан к высоте самого блока. Если блок стоит в режиме «На весь экран», сдвиг фона рассчитывается относительно высоты экрана посетителя, и на широких мониторах эффект выглядит мягче, чем на ноутбучных экранах 13-15 дюймов, где блок физически меньше и скролл долистывает его быстрее.

Почему в обычном блоке параллакса нет по умолчанию

Zero Block даёт полную свободу вёрстки, а параллакс там включается штатно в настройках анимации элемента: по скроллу с регулировкой скорости и по движению мыши с дистанцией по осям X и Y. Обычные контентные блоки, текст, галерея, отзывы, вообще не рассчитаны на фоновые слои в духе Cover, поэтому там даже теоретически нечему параллаксить.

Если эффект нужен именно в таком блоке, разметку и скрипт добавляю руками через код T123 или через HTML-элемент в Zero Block. По сути это сборка собственного мини-Cover внутри произвольной секции страницы.

Как добавить параллакс в произвольный блок через код

Разметка держится на двух слоях: подложка с картинкой, которая сдвигается при скролле, и контент поверх неё, который остаётся на своём месте. В коде T123 или в HTML-элементе Zero Block добавляю такую структуру:

<div class="parallax-wrap">
  <div class="parallax-layer" style="background-image:url(bg.jpg)"></div>
  <div class="parallax-content">Текст поверх слоя</div>
</div>

Дальше вешаю скрипт, который на каждый кадр скролла сдвигает слой .parallax-layer через transform. Использую requestAnimationFrame, чтобы не пересчитывать позицию чаще, чем браузер успевает отрисовать кадр, и getBoundingClientRect, чтобы скорость сдвига не зависела от места блока на странице:

const layer = document.querySelector('.parallax-layer');
let ticking = false;

function updateParallax() {
  const rect = layer.getBoundingClientRect();
  const speed = 0.35;
  const offset = rect.top * speed;
  layer.style.transform = 'translate3d(0, ' + offset + 'px, 0)';
  ticking = false;
}

window.addEventListener('scroll', function () {
  if (!ticking) {
    requestAnimationFrame(updateParallax);
    ticking = true;
  }
}, { passive: true });

Скорость сдвига обычно держу в диапазоне 0,2-0,5 от скорости обычного скролла: меньше 0,2 эффект почти не считывается глазом, больше 0,6 фон начинает заметно отставать от контента и выглядит как баг, а не как задуманная анимация. На фото с людьми или текстом внутри картинки беру нижнюю границу диапазона, чтобы не резать лица и буквы краем блока при сильном сдвиге.

Ещё один рабочий приём: если параллакс ставлю на изображение с товаром в интернет-магазине, проверяю, не перекрывает ли сдвинутый слой соседние блоки при быстрой прокрутке колесом мыши. У Тильды блоки часто идут впритык друг к другу, и слой, сдвинутый на большое расстояние, может на долю секунды вылезти за пределы своей секции.

Скрипт добавляю в T123 конкретного блока, если параллакс нужен один раз, либо общим файлом через Настройки сайта, вкладку «Дополнительно», поле «Вставка кода перед /body», если эффект повторяется на нескольких блоках или страницах. Второй вариант удобнее поддерживать: один файл на всё, а не копия одного и того же скрипта в разных T123.

Если разбираться в вёрстке Zero Block и отлаживать скролл-скрипт нет времени, такую доработку блока под параллакс я беру в работу как обычный кастомный скрипт для Тильды.

Оптимизация параллакса под мобильные устройства и производительность

Три вещи, на которые смотрю в первую очередь при такой доработке.

• Отключаю эффект на узких экранах через проверку window.innerWidth или matchMedia, а не оставляю его крутиться на телефонах: там скролл и так проседает из-за анимаций самой Тильды, лишний JS в кадре добавляет тормозов.
• Использую transform вместо смены background-position или top и left. Transform обрабатывает видеокарта, а не основной поток браузера, поэтому даже на бюджетном Android эффект не режет FPS так сильно, как пересчёт позиции фона на каждый пиксель скролла.
• Проверяю системную настройку prefers-reduced-motion. Часть пользователей включает её намеренно, чтобы избежать укачивания от анимаций, и в этом случае честнее отключить параллакс совсем, а не игнорировать выбор человека.

IntersectionObserver помогает не считать позицию блока, пока он далеко за пределами экрана: подписываю observer на .parallax-wrap, слушатель скролла вешаю только когда блок попадает в viewport, а при выходе из зоны видимости снимаю. На странице с десятком секций это заметно снижает число лишних вычислений, потому что скрипт не гоняет transform для блока, который пользователь ещё не долистал.

Для CSS-варианта на background-attachment добавляю will-change: transform на родительский слой заранее, чтобы браузер выделил под анимацию отдельный композитный слой и не пересчитывал стили всей секции при каждом кадре. Без этого свойства на Android-браузерах иногда заметен рывок в момент первого скролла до блока.

Перед сдачей проверяю параллакс в трёх окружениях: Chrome и Firefox на десктопе, Safari на iPhone и любой Android-браузер, потому что расхождения чаще всего всплывают именно между Safari и остальными движками из-за особенностей background-attachment и композитинга слоёв.

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

На практике доработка одного блока под параллакс с адаптацией под мобильные и оптимизацией скролла занимает от 1,5 до 3 часов, если верстка блока уже готова и меняется только слой с картинкой.

Сравнение способов параллакса в Tilda

Перед тем как выбирать способ, обычно прикидываю два вопроса: нужен ли эффект на одном конкретном блоке или на нескольких сразу, и критична ли поддержка старых версий Safari для аудитории сайта. Если аудитория заходит в основном с новых iPhone и десктопа, разница между CSS-вариантом и JS-параллаксом на transform почти не ощущается. Если среди посетителей много Android-устройств среднего и низкого класса, transform через JS с throttling обычно даёт более ровный скролл, чем background-attachment, который на части таких браузеров либо не работает, либо ощутимо просаживает FPS.

Собрал три варианта в таблицу, чтобы было видно, где каждый ломается и для какого блока подходит.

Итоговая цена доработки зависит от того, чей это блок: готовый шаблон Тильды дорабатывать быстрее, чем блок с нестандартной версткой на Zero Block, поэтому стоимость называю после просмотра конкретной страницы. Простую доработку одного блока под параллакс беру в работу от 3 000 рублей, как обычную правку скрипта. Если параллакс нужен сразу на нескольких секциях сайта с тестированием в разных браузерах, оцениваю это уже как отдельную комплексную интеграцию.

Частые вопросы

Работает ли встроенный параллакс Тильды на телефонах?

Нет, Тильда отключает эффект на мобильных автоматически, потому что background-attachment: fixed нестабильно ведёт себя в Safari на iOS. Если на телефоне при включённом параллаксе в настройках блока фон остаётся статичным, это ожидаемое поведение платформы, а не ошибка вёрстки.

Можно ли сделать параллакс без кода?

В блоке Cover да, переключатель в настройках фона включает эффект без единой строчки кода. В Zero Block тоже: параллакс по скроллу и мыши включается в настройках анимации элемента. Для обычных T‑блоков без кода не обойтись, потому что готовой настройки под произвольные секции в Тильде нет.

Тормозит ли параллакс сайт на слабых устройствах?

Зависит от реализации. CSS background-attachment на десктопе почти не грузит браузер, а JS-скрипт без throttling через requestAnimationFrame может пересчитывать позицию сотни раз в секунду и просаживать FPS. При аккуратной реализации на transform и с отключением на мобильных разницы в скорости скролла обычно не заметно.

Совместим ли параллакс с Zero Block?

Да, у элементов Zero Block есть штатный параллакс по скроллу и по движению мыши в настройках анимации. Слоистый фон под контентом, как в Cover, добавляете вручную через HTML-элемент и скрипт. По разметке принцип тот же, что и в Cover: слой с фоном отдельно, контент поверх отдельно.