Что делает параллакс-слайдер
Обычная галерея передвигает карточки целиком. В параллакс-слайдере изображение дополнительно смещается внутри своей рамки: передний план и фотография движутся по-разному, создавая ощущение глубины. Эффект подходит для портфолио, подборки проектов или серии фотографий. Важный текст и кнопки лучше оставить неподвижными, чтобы движение не мешало чтению.
В модификации LF Code на большом экране галерею можно листать колесом и перетаскивать мышью. Когда галерея достигает края, прокрутка страницы может продолжиться. На телефоне используется горизонтальный свайп; эффект наведения мыши там не нужен. Перед покупкой проверьте поведение в живом примере параллакс-слайдера.
Как подготовить Zero Block
- Создайте Zero Block с несколькими изображениями, расположенными в горизонтальный ряд. Сделайте ряд шире видимой области, иначе слайдеру будет некуда прокручиваться.
- В настройках блока укажите CSS-класс
uc-parallax. В поле класса пишите название без точки. - Каждому изображению, которое должно участвовать в эффекте, задайте CSS-класс
parallax. Не назначайте его тексту, ссылкам и кнопкам. - Проверьте размеры изображений и отступы для всех разрешений Zero Block. На телефоне оставьте понятный намёк на следующий слайд.
Для эффекта нужна исходная структура Zero Block с изображениями Tilda. Он не предназначен для произвольного стандартного слайдера. Не подключайте второй скрипт прокрутки к тому же контейнеру: обработчики могут конфликтовать.
Как получить код с нужными параметрами
После покупки откройте «Покупки» в личном кабинете LF Code, выберите параллакс-слайдер и настройте параметры. Генератор подготовит готовый код: вручную менять JavaScript не требуется. Скопируйте результат и добавьте в HTML-блок T123 на той же странице после подготовленного Zero Block. Затем опубликуйте страницу и проверьте публичный адрес.
Сохранённый код действует с теми параметрами, с которыми вы его сгенерировали. Если позже изменить настройки в кабинете, сформируйте код заново, замените старый фрагмент в T123 и повторно опубликуйте страницу. Подробнее о размещении кода — в инструкции по HTML, CSS и JavaScript на Tilda.
Какие параметры влияют на движение
- Скорость прокрутки. Определяет, насколько активно ряд реагирует на колесо. Начните с умеренного значения, чтобы пользователь успевал рассмотреть каждый кадр.
- Плавность. Задаёт характер приближения к целевой позиции. Слишком затянутое движение может ощущаться как задержка.
- Масштаб изображения. Увеличение оставляет запас за краями рамки. Если запаса мало, при смещении могут появиться пустые участки.
- Глубина параллакса. Управляет заметностью смещения фотографии. Сильное движение лучше использовать для декоративных кадров, а не для изображений с важными деталями у края.
Что проверить после публикации
На компьютере пролистайте галерею в обе стороны, перетащите её мышью и отпустите кнопку за пределами блока. Проверьте начало и конец ряда, клики по соседним ссылкам и продолжение вертикальной прокрутки страницы. Повторите проверку после изменения ширины окна.
На телефоне проверьте горизонтальный свайп, вертикальную прокрутку, оба положения экрана и отсутствие общего горизонтального скролла страницы. Отдельно убедитесь, что изображения не закрывают подписи, а галерея не захватывает все жесты пользователя.
Почему слайдер не двигается
- Ряд не шире видимой области. Увеличьте число слайдов или расстояние между ними.
- Класс назначен не тому Zero Block или изображению. Проверьте
uc-parallaxиparallaxбез лишних пробелов. - Сверху расположен прозрачный элемент, перехватывающий мышь. Проверьте слои и клики в опубликованной странице.
- Другой скрипт управляет той же прокруткой. Временно отключите его и проверьте галерею отдельно.
- Открыта старая публикация или кеш. Опубликуйте страницу после замены кода и обновите её.
Если проблема сохраняется, отправьте в поддержку ссылку на опубликованную страницу и описание устройства. Пароль от Tilda не нужен.
Модификация LF Code
Параллакс-слайдер стоит 750 ₽. На странице решения есть живой пример, требования и инструкция; после покупки доступны настройки и генерация кода в личном кабинете.
Посмотреть параллакс-слайдерСпособы вставки HTML: официальная документация Tilda.