Как сделать эффект разлета частиц при клике на кнопку

Модификация поможет добавить эффект разлетающихся частиц при клике на кнопку в Zero Block. Можно загрузить свои изображения или использовать режим конфетти (разлёт цветных сфер). Дополнительно можно настроить скорость и радиус разлета, а также размер и количество частиц.

Модификация работает с включенным Autoscale в блоках

Модификация работает только Zero Block

Номер модификации в библиотеке TiCode

Генератор кода

поделиться модификацией

Класс элемента

Тип эффекта

Ссылки на изображения

Количество частиц

Размер частиц

Дальность разлёта

Длительность эффекта

Поворот частиц

войти

Войдите в аккаунт чтобы получить доступ к генератору кода

регистрация

оплатить

Этот генератор кода доступен только тем кто оплатил подписку

<style> .ticonfetti { position: absolute; width: 10px; height: 10px; border-radius: 50%; opacity: 0; pointer-events: none; z-index: 1000; } .ticonfetti-img { position: absolute; width: 20px; height: 20px; opacity: 0; pointer-events: none; z-index: 1000; } </style> <script> const TCDuse = true; const TCDcolorString = ''; const TCDcolors = TCDcolorString.split(',').map(color => color.trim()); const TCDrot = true; const TCDimgString = ''; const TCDimg = TCDimgString.split(',').map(url => url.trim()); document.querySelectorAll('.ti-confetti').forEach(button => { button.addEventListener('click', function(e) { const buttonRect = button.getBoundingClientRect(); const buttonX = buttonRect.left + window.scrollX; const buttonY = buttonRect.top + window.scrollY; const ticlickX = e.clientX - buttonRect.left; const ticlickY = e.clientY - buttonRect.top; for (let i = 0; i < 30; i++) { createConfetti(buttonX + ticlickX, buttonY + ticlickY, TCDuse, TCDrot); } }); }); function createConfetti(x, y, TCDuse, TCDrot) { let ticonfetti; if (TCDuse) { ticonfetti = document.createElement('img'); ticonfetti.src = TiCodegetRandomImage(); ticonfetti.classList.add('ticonfetti-img'); } else { ticonfetti = document.createElement('div'); ticonfetti.classList.add('ticonfetti'); ticonfetti.style.backgroundColor = TiCodegetRandomColor(); } document.body.appendChild(ticonfetti); const tcsize = TCDuse ? 30 : Math.random() * 30 + 5; ticonfetti.style.width = `${tcsize}px`; ticonfetti.style.height = `${tcsize}px`; ticonfetti.style.left = `${x - tcsize / 2}px`; ticonfetti.style.top = `${y - tcsize / 2}px`; const destX = (Math.random() - 0.5) * 200; const destY = (Math.random() - 0.5) * 200; const keyframes = [ { transform: `translate(0, 0)${TCDrot ? ' rotate(0deg)' : ''}`, opacity: 1 }, { transform: `translate(${destX}px, ${destY}px)${TCDrot ? ` rotate(${Math.random() * 360}deg)` : ''}`, opacity: 0 } ]; const animationti = ticonfetti.animate(keyframes, { duration: Math.random() * 1000 + 500, easing: 'ease-out' }); animationti.onfinish = () => ticonfetti.remove(); } function TiCodegetRandomColor() { return TCDcolors[Math.floor(Math.random() * TCDcolors.length)]; } function TiCodegetRandomImage() { return TCDimg[Math.floor(Math.random() * TCDimg.length)]; } </script>

КОПИРОВАТЬ КОД

Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта

1. Создаем в Zero Block кнопку и присваиваем ей класс ti-confetti
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс

2. Выбираем тип эффекта:
"Свои изображения" - если выбрали этот режим, то в поле указываем в поле "Ссылки на изображения" указываем ссылку на картинку. Можно указать несколько картинок через запятую. Например:
"Конфетти (цветные сферы)" - если выбрали этот режим, то в поле указываем в поле "Цвет сфер" указываем цветов коды или коды через запятую. Например: https://static.tildacdn.one/image1.svg, https://static.tildacdn.one/image2.svg

Важно! При указании несколько картинок или цветовых кодов не забывайте ставить пробел после запятой

3. При необходимости указываем дополнительные настройки в генераторе:
Количество частиц - можем указать свое количество частиц при клике. При каждом клике будет создаваться рандомное количество частиц. Минимальное значение 5;
Размер частиц - указываем размер частиц;
Дальность разлёта - указываем дальность разлета частиц;
Длительность эффекта - указываем время в секундах для анимации частиц;
Поворот частиц - если включено, то при разлете частицы будут поворачиваться вокруг своей оси;

4. Копируем код и вставляем в HTML блок Т123. Блок кода размещаем ниже кнопок.

Примечание: при использовании режима "свои изображения" все картинки нужно залить на тильда в зеро блок или любой блок стандартной галереи. Затем скопировать ссылки и вставить в генератор. Блок галереи можно скрыть. Если грузили в зеро блок, то достаточно вынести картинки за пределы зоны видимости или поставить прозрачность на 0.

НАЖМИ НА МЕНЯ