Подписка на библиотеку модификаций
pro
Получите доступ к расширенным настройкам, сценариям и возможностям сервиса
Оформить подписку

Эффект конфетти в Zero-блоке

Добавляет эффект разлетающихся частиц конфетти внутри любого элемента в Zero-блоке.

Инструкция по установке

  • Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта
    Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.
<script src="https://cdn.postnikovmd.com/tilda@1.5/mods.min.js"></script>
Скопировать код
Код скопирован!
Синхронизация обновлений включена. Новые версии и исправления будут устанавливаться автоматически.
Синхронизация обновлений включена. Модификации будут загружаться с альтернативного источника (для зарубежных проектов).
Синхронизация обновлений отключена. Текущая версия останется неизменной, независимо от обновлений.
  • Задайте блоку, в котором должен срабатывать эффект конфетти, класс .uc-confetti
    Если таких блоков на странице несколько, укажите для них разные названия классов, например, .uc-confetti1, .uc-confetti2 и т.д.
    Как задать класс элементам?
  • Добавьте в блок шейп, внутри которого будет появляться конфетти и задайте ему класс .confetti
    Размер данного шейпа будет определять область, в пределах которой должны появляться частицы.
  • Если конфетти должно запускаться по кнопке — задайте ей ссылку #confetti
    Если на странице несколько блоков с конфетти, используйте разные ссылки: #confetti1, #confetti2 и т. д., указав их в настройках модификации.
  • Задайте в настройках модификации параметры появления эффекта
  • Скопируйте код и вставьте его в блок T123 в конец страницы
<!--confetti.js Эффект конфетти в Zero-блоке. https://postnikovmd.com/mods/confetti-->
<script>confetti.init('.uc-confetti')</script>
Все примеры
92
Настройки модификации

Настройки модификации

Класс блока с конфетти
Длительность анимации
Ссылка для запуска анимации
Цвета частиц конфетти
<!--confetti.js Эффект конфетти в Zero-блоке. https://postnikovmd.com/mods/confetti-->
<script>confetti.init(".uc-confetti")</script>
Скопировать код
Скопировать код
Код скопирован!

Особенности

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

Документация

Элементы

Параметры

Если при установке что-то пошло не так

Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению
Смотрите также
все модификации
t.me/postnikovmds
Присоединяйтесь к авторскому Telegram-каналу
Всё о возможностях библиотеки, модификациях и личном опыте
1K подписчиков
Присоединяйтесь к Telegram-каналу
Всё о возможностях библиотеки, новых модификациях и личном опыте
Перейти
t.me/postnikovmds
Чат авторского канала о модификациях
Делимся опытом, обсуждаем обновления, возможности и архитектуру модов
Пригласительная ссылка