Шлейф фотографий за курсором в Tilda: настройка из GL03

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

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

Добавьте GL03 с нужными изображениями и назначьте ему отдельный CSS-класс, например uc-gallery. Укажите такое же имя в поле класса галереи в конструкторе. Это определяет состав снимков, а не место, где посетитель увидит шлейф.

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

Выберите ширину и высоту области эффекта, включая телефонную версию. Либо включите вставку в готовый элемент, назначьте ему собственный короткий класс и задайте размеры в Tilda.

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

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

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

Шаг появления задаётся в пикселях. Чем он меньше, тем чаще возникают фотографии при движении. Чтобы шлейф стал реже, увеличьте это значение. Затем подберите время затухания и максимум одновременных снимков.

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

Разместите код в T123 после источника и принимающего элемента, если он используется. Опубликуйте страницу и проведите мышью по всей области. Затем проверьте её на телефоне пальцем.

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

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

• Источником служит явно указанная нужная галерея.
• Класс места показа не перепутан с классом источника.
• Быстрое движение не создаёт слишком плотный слой фото.
• Кнопки и прокрутка страницы остаются доступны.
• Важные работы можно посмотреть отдельно без исчезновения.

Читайте также: Кастомный курсор в Tilda: эффект и подсказки над ссылками · Перетаскивание элементов в Zero Block: стикеры и фотографии на Tilda.