Падающие элементы и эффекты по клику

Динамический декор состоит из двух независимых механизмов: фоновых падающих элементов и короткого эффекта, который создаётся в месте клика пользователя.

[Скриншот 1: падающие элементы и эффект по клику на публичной странице]

Падающие элементы

Для включения используйте флаг «Включить падающие элементы».

Интервал между элементами

Значение задаётся в миллисекундах. Это не количество элементов, а пауза между созданием новых.

• 200 мс — эффект заметно плотнее;
• 260 мс — стандартное значение большинства пресетов;
• 400 мс и больше — более спокойный фон.

Слишком маленький интервал увеличивает количество анимаций на странице и может быть избыточным на слабых мобильных устройствах. Для насыщенного оформления лучше сначала проверить 200–300 мс, а не сразу устанавливать минимальное значение.

Наборы падающих элементов

Снег / снежинки

Использует символ снежинки. Подходит для Нового года и зимнего оформления.

Сердечки

Подходит для 14 февраля и романтических промо-страниц.

Лепестки

Используется в пресете 8 марта и других весенних вариантах.

Конфеты

Выводит декоративные сладости.

Летучие мыши

Стандартный фон для Хэллоуина.

Произвольная иконка Font Awesome

Позволяет указать свой CSS-класс иконки. Поле «Класс иконки Font Awesome для падающих элементов» имеет смысл именно для этого варианта.

Цвет падающих элементов

Цвет задаётся отдельно для каждого праздничного пресета. Он хорошо работает для обычных символов и Font Awesome. Для цветных emoji визуальный результат может зависеть от браузера и операционной системы.

Эффект по клику

Флаг «Включить эффект по клику» разрешает анимацию в точке клика.

Максимальное количество эффектов на экране

Ограничение защищает страницу от слишком большого количества одновременных анимаций при частых кликах. Стандартное значение — 14.

Наборы эффекта по клику

• Снежки — круги;
• Снежинки — символы снежинок;
• Сердечки;
• Цветы;
• Карамельные трости / конфеты;
• Фейерверки / искры;
• Тыквы;
• Произвольная иконка Font Awesome.

[Скриншот 2: выбор набора эффекта по клику и цвета]

Произвольная иконка

Выберите вариант «Произвольная иконка Font Awesome» и заполните поле класса. Если класс не задан, компонент использует резервную иконку звезды.

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

Когда отключать динамические эффекты

Их имеет смысл уменьшить или отключить:

• на страницах с большим количеством собственной анимации;
• в формах заказа и личном кабинете;
• на слабых мобильных устройствах;
• если декоративные клики отвлекают от основных кнопок;
• если сайт использует строгий минималистичный дизайн.

Независимость эффектов

Можно оставить только один механизм. Например, отключить падающий фон, но оставить сердца по клику; либо включить лёгкий снег и полностью отключить реакцию на клики.

Как подобрать комфортную интенсивность

1. Начните со стандартного интервала 260 мс.
2. Откройте длинную страницу и прокрутите её несколько раз.
3. Проверьте мобильное устройство.
4. Если декора слишком много, увеличьте интервал.
5. Если эффект почти незаметен, уменьшайте постепенно.

[Скриншот 3: сравнение более плотного и более редкого падающего эффекта]