Параллакс слайдер в зеро блоке Тильды
Параллакс слайдер в зеро блоке Тильды — это один из самых эффектных способов оживить сайт, подчеркнуть динамику и удержать внимание пользователя. Несмотря на то, что стандартные инструменты Tilda не дают полноценного параллакса для слайдеров, с помощью zero block, кастомного тильда кода и простых тильда модификаций можно создать очень плавный, глубокий и динамичный эффект.
В этой статье мы разберём, как работает параллакс-анимация, какими способами можно создать параллакс слайдер в zero block, какие ошибки чаще всего допускают новички, и какие оптимальные решения используют разработчики, работающие с Tilda более 10–15 лет.
- Код
- Инструкции
- Пример
- Версии
- Подробнее
Модификация для создания параллакс слайдера в зеро блоке тильды | Версия 1.0
Модификация для создания параллакс слайдера в зеро блоке тильды | Версия 2.0
Параллакс слайдер в зеро блоке тильды
- Создайте зеро блок
- Нажмите правой кнопкой мыши внутри блока и выберите CSS-Class
- В появившемся поле пропишите класс parallax
- Откройте редактор зеро блока и удалите стандартное наполнение
- В меню РАСПОЛОЖЕНИЕ И ОВЕРФЛОУ в пункте ОВЕРФЛОУ выберите Авто
- Добавьте в зеро блок элемент Изображение и подгоните под нужные вам размеры. Рекомендуемые минимальные размеры изображения в зеро блоке 412х553
- В настройках изображения в параметре Вписать выберите Заполнить (Cover), а в параметре Расположение выберите По центру
- Нажмите правой кнопкой мыши на изображение и выберите Сгруппировать
- В настройках группы справа в параметре ГРУППА выберите Объект
- Нажмите правой кнопкой мыши на сгруппированное изображение и выберите Добавить имя CSS-класса
- В появившемся поле пропишите класс parallax. Первый слайд готов
- Продублируйте созданную группу с изображением столько раз, сколько слайдов вам требуется и замените изображения в новых слайдах
- Расположите слайды по горизонтали так, чтобы часть слайдов вышла за правую границу зеро блока
- Если требуется текст под слайдами, создайте под каждым текстовые элементы
- Выделите все изображения отдельно от текста, справа в меню нажмите на +КОНТЕЙНЕР и выберите Window контейнер
- Выделите все текстовые элементы, справа в меню нажмите на +КОНТЕЙНЕР и выберите Window контейнер
- Переместите слайды с текстом ближе к левой границе блока, чтобы уменьшить изначальный отступ перед слайдером
- Выделите и изображения, и текстовые элементы и настройте для них базовую анимацию для первого появления, если это требуется
- Параллакс эффект работает на устройствах шириной от 980 пикселей и больше, поэтому адаптируйте слайдер под Экран: 960-1200 (вьюпорты в верхней части зеро блока)
- На остальных экранах поменьше можно оставить этот же слайдер (без параллакс эффекта), либо превратить в статичный блок
- После всех настроек сохраните изменения и закройте зеро блок
- После всех блоков на странице создайте HTML блок Т123, скопируйте в него код модификации и опубликуйте страницу
Посмотреть живой пример | Версия 1.0
Посмотреть живой пример | Версия 2.0
Что такое параллакс и почему он так хорошо работает в Тильде
Параллакс — это визуальный эффект, при котором объекты движутся с разной скоростью. В контексте «Параллакс слайдер в зеро блоке Тильды» это означает, что элементы внутри слайда слегка смещаются при прокрутке или перелистывании.
На сайте, сделанном через Tilda, параллакс особенно полезен, потому что:
- он делает даже простые изображения интереснее;
- усиливает впечатление от проекта, не перегружая zero block;
- добавляет глубину, которой обычно не хватает стандартным шаблонам Tilda;
- повышает вовлечённость и задерживает пользователя на странице.
Почему стандартных инструментов Tilda Zero Block для параллакса не хватает
Несмотря на развитые возможности zero block, Tilda не предлагает готового блока «параллакс-слайдер».
Да, есть базовые параллакс-эффекты, но они не работают внутри слайдера:
элементы начинают «ломаться», смещаться неправильно или работать только при вертикальном скролле.
Поэтому разработчики применяют:
- кастомные тильда скрипты,
- небольшой тильда код с JavaScript,
- нестандартные способы размещения элементов в zero block.
Именно комбинация tilda zero block + кастомный скрипт позволяет сделать настоящий параллакс слайдер с плавной горизонтальной или вертикальной анимацией.
Параллакс при горизонтальном скролле
Если требуется сайт-презентация, где слайды перелистываются не кликами, а прокруткой — используется горизонтальный параллакс-скролл.
Zero block позволяет завернуть все изображения в artboard, а далее tilda код превращает вертикальный скролл в горизонтальный.
Через JavaScript задаётся инерция движения и эффекты параллакса.
Этот вариант идеально подходит для:
- storytelling страниц,
- промо-лендингов,
- сайтов под презентации продуктов,
- портфолио с большими арт-объектами.
Каким должен быть правильный тильда-скрипт для параллакс слайдера
Чтобы параллакс слайдер в zero block работал без лагов, скрипт должен учитывать:
- плавность анимации (requestAnimationFrame),
- ограничение FPS на слабых устройствах,
- отключение параллакса на мобильных
(в Tilda это обязательно — иначе сайт будет тормозить), - поддержку retina экранов,
- корректные размеры artboard в zero block.
Новички часто делают скрипты, которые:
- перегружают страницу,
- обновляют transform слишком часто,
- не учитывают масштабирование Tilda,
- конфликтуют с другими эффектами.
Профессиональные тильда-скрипты всегда оптимизируют анимацию и разгружают браузер.
Когда стоит использовать параллакс слайдер, а когда — нет
Использовать, если:
- сайт творческий, презентационный или эмоциональный;
- нужно выделить продукт через эффект глубины;
- важна современная визуальная подача;
- сайт на zero block и требует нестандартного UI.
Не использовать, если:
- сайт новостной или текстовый;
- нужно максимум скорости загрузки;
- аудитория преимущественно мобильная;
- заказчик хочет супер-минимализм.
Преимущества параллакс слайдера в Zero Block Тильды
- 100% кастомизация — вы контролируете всё;
- можно добавить любой тильда код и расширить функционал;
- идеально подходит для брендинга;
- даёт конкурентное преимущество — такие сайты выглядят дороже;
- работает внутри стандартного визуального редактора Tilda.
Параллакс слайдер в зеро блоке Тильды — это мощный инструмент, который позволяет создавать по-настоящему впечатляющие лендинги, сайты презентации и портфолио.
Правильное сочетание zero block, кастомного JavaScript и грамотной анимации позволяет создать лёгкий, быстрый и эффектный параллакс-слайдер, который будет работать на всех устройствах и радовать пользователей.
Параллакс слайдер в зеро блоке тильды | Версия 1.0
Эту версию модификации можно использовать в паре с другими блоками на странице. Слайдер прокручивается только в том случае, если курсор мыши находится внутри блока со слайдером. Когда горизонтальная прокрутка слайдера заканчивается, страница начинает вертикальную прокрутка к другим блокам. Эта функция работает и в обратном направлении.
Параллакс слайдер в зеро блоке тильды | Версия 2.0
Эта версия модификации разработана для случаев, если на странице планируется только слайдер + шапка и подвал сайта. В этой версии прокрутка с любого места на странице прокручивает слайдер, даже если курсор мыши находится на шапке или подвале сайта (в версии 1.0 слайдер прокручивается, только если курсор мыши находится внутри зеро блока со слайдером). Вертикальный скролл всей страницы отключается.
Для того, чтобы код функционировал правильно, высоту зеро блока со слайдером нужно сделать 100%, а шапку и подвал фиксированными.
