Эффектные кнопки в Тильде: частицы в виде любых картинок PNG при наведении за 5 минут

<style> /* Скрываем оригинальные картинки */ .hidden-image { display: none; } /* Стили для частиц */ .particle { position: absolute; pointer-events: none; background-size: contain; background-repeat: no-repeat; opacity: 1; transform: scale(1); animation: particle-fall 1.5s ease-out forwards; z-index: 9999; } /* Кнопки должны быть ниже частиц */ .effect-button, .effect-button-2 { position: relative; z-index: 10; } @keyframes particle-fall { 0% { transform: scale(1) translateY(0); opacity: 1; } 100% { transform: scale(0) translateY(50px); opacity: 0; } } </style> <script> document.addEventListener("DOMContentLoaded", function () { let buttons = document.querySelectorAll(".effect-button, .effect-button-2"); // Обе кнопки let images = { "effect-button": "https://optim.tildacdn.com/tild6565-3262-4334-b336-666333613465/-/format/webp/pngwingcom_29.png", // ???? Первая картинка "effect-button-2": "https://thumb.tildacdn.com/tild6131-6666-4662-a364-356338333938/-/format/webp/dd61d78a-792f-48fa-8.png.webp" // ???? Вторая картинка }; let particleCount = 1; // ???? Количество частиц (можно менять) buttons.forEach(button => { button.addEventListener("mouseenter", function (e) { let buttonClass = button.classList.contains("effect-button") ? "effect-button" : "effect-button-2"; let imageSrc = images[buttonClass]; let createParticle = (event) => { for (let i = 0; i < particleCount; i++) { let particle = document.createElement("div"); particle.classList.add("particle"); particle.style.left = `${event.pageX + (Math.random() * 40 - 20)}px`; particle.style.top = `${event.pageY + (Math.random() * 40 - 20)}px`; let size = `${10 + Math.random() * 20}px`; // ???? Размер частиц particle.style.width = size; particle.style.height = size; particle.style.backgroundImage = `url('${imageSrc}')`; document.body.appendChild(particle); setTimeout(() => particle.remove(), 3000); // Удаляем частицу через 3 сек } }; button.addEventListener("mousemove", createParticle); button.addEventListener("mouseleave", function () { button.removeEventListener("mousemove", createParticle); }); }); }); }); </script>