Эффекты фотографий в Tilda: параллакс, проявление и переход в цвет

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

Мод «Эффекты изображений» объединяет эти режимы. Разберём, как выбрать саму картинку, настроить один эффект и избежать пустых полос по краям.

Проявление из-под маски удобно для входа в раздел. Параллакс и зум по скроллу связывают движение с прокруткой. Режим Кена Бёрнса медленно увеличивает и смещает фото сам, без участия посетителя.

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

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

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

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

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

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

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

1. Выберите конкретный блок и поверхность изображения.
2. Настройте один режим и его параметры.
3. Проверьте движение во внутренней области превью конструктора.
4. Поставьте код в T123 после изображений и опубликуйте страницу.
5. Прокрутите сайт вниз и обратно, проверьте наведение и телефон.

Не применяйте к одной фотографии несколько кодов, которые одновременно меняют масштаб или положение. Также проверьте существующие анимации Tilda на этом элементе.

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

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

Читайте также: Галерея как в Pinterest на Tilda: сетка и увеличение фото · Появление элементов при скролле в Tilda: как настроить по очереди.