Галерея с эффектом прожектора в Tilda: проявление цвета за курсором

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

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

Загрузите в GL03 исходные цветные изображения и выберите источник в «Где применять». Не нужно заранее сохранять вторую чёрно-белую версию каждого файла. Вид внутри и снаружи световой области создаётся на странице.

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

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

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

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

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

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

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

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

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

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

• Цвет появляется у нужной подборки.
• Радиус позволяет понять фотографию.
• Вне луча сетка не становится бессмысленной тёмной областью.
• На телефоне доступны фотографии и продолжение страницы.
• Для подробного просмотра есть подходящий сценарий, если он необходим.

Читайте также: Галерея как в Pinterest на Tilda: сетка и увеличение фото · Эффекты фотографий в Tilda: параллакс, проявление и переход в цвет.