магазин кастомных решений для тильды
Здесь собраны самые уникальные решения для тильды, с помощью которых вы сможете расширить функционал своих сайтов
Настройте
Цвета, размеры, поведение в конструкторе ниже
Скопируйте код
Одна кнопка — код в буфере обмена
Вставьте в Tilda
Блок T123 (HTML) на нужной странице

Эффекты фотографий при скролле и наведении в Tilda

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

Что умеет мод

  • Проявляет изображение из-под маски при входе в экран.
  • Добавляет параллакс или меняет масштаб по мере прокрутки.
  • Создаёт непрерывный медленный зум с панорамированием — эффект Кена Бёрнса.
  • Возвращает цвет при наведении на чёрно-белую или двухцветную фотографию.

Как подключить

Изображения блоковimg и фоновые картинкиКод в T123
  1. Выберите изображения

    Укажите блок и его изображение через каталог конструктора либо введите точный селектор вручную. По умолчанию область может охватывать разные картинки страницы; ограничьте её нужным блоком, например через его ID.

  2. Задайте эффект

    Выберите проявление, параллакс, Кен Бёрнс, переход в цвет или зум по скроллу. Настройте только параметры выбранного режима: направление маски, глубину, масштаб, длительность или оттенки.

  3. Проверьте условия запуска

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

  4. Опубликуйте и проверьте

    Вставьте код в T123 после изображений. На сайте проверьте прокрутку, наведение, границы картинок и мобильный экран. При параллаксе подберите запас увеличения так, чтобы при смещении не появлялись пустые края.

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

Вопросы и ограничения

Чем Кен Бёрнс отличается от зума по скроллу?

Первый медленно двигается по кругу сам. Во втором масштаб связан с прохождением изображения через экран при прокрутке страницы.

Работают ли фоновые изображения?

Да. Мод определяет картинку, заданную фоном, и использует настройки фона для движения и масштаба. Важно выбрать нужную обёртку.

Можно проявить картинку только один раз?

Да. Для режима проявления включите однократное проигрывание. Повторное возвращение к изображению не будет снова запускать вход.

Что увидит посетитель телефона?

Для эффекта наведения при включённом режиме «Только на десктопе» картинка остаётся без этого эффекта. Режимы прокрутки проверяйте отдельно на мобильной странице.

Доступ к конструктору

Мод доступен по подписке Pro. Войдите в аккаунт, чтобы настроить его и получить код. Действующие условия указаны в тарифах.

Другие способы оформить элементы

Made on
Tilda