// Улучшенная версия с настройками
document.addEventListener('DOMContentLoaded', function() {
function initSparkleButtons(config = {}) {
const {
sparkleCount = 10,
minSize = 2,
maxSize = 4,
colors = ['#ffffff'],
animationDuration = 800
} = config;
document.querySelectorAll('.sparkle-btn').forEach(button => {
const sparklesContainer = document.createElement('div');
sparklesContainer.className = 'sparkles-container';
sparklesContainer.style.cssText = `
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
overflow: hidden;
`;
button.style.position = 'relative';
button.appendChild(sparklesContainer);
function createSparkle() {
const sparkle = document.createElement('div');
const color = colors[Math.floor(Math.random() * colors.length)];
const size = minSize + Math.random() * (maxSize - minSize);
sparkle.style.cssText = `
position: absolute;
width: ${size}px;
height: ${size}px;
background: ${color};
border-radius: 50%;
pointer-events: none;
opacity: 0;
box-shadow: 0 0 6px 2px ${color}80;
z-index: 2;
`;
const posX = 5 + Math.random() * 90;
const posY = 5 + Math.random() * 90;
sparkle.style.left = `${posX}%`;
sparkle.style.top = `${posY}%`;
sparklesContainer.appendChild(sparkle);
sparkle.animate([
{ opacity: 0, transform: 'scale(0)' },
{ opacity: 0.9, transform: 'scale(1.8)' },
{ opacity: 0, transform: 'scale(0.3)' }
], {
duration: animationDuration * (0.7 + Math.random() * 0.6),
easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
}).onfinish = () => sparkle.remove();
}
button.addEventListener('mouseenter', function() {
const count = Math.floor(sparkleCount * (0.8 + Math.random() * 0.4));
for (let i = 0; i < count; i++) {
setTimeout(createSparkle, i * (animationDuration / count * 0.3));
}
});
});
}
// Инициализация с настройками
initSparkleButtons({
sparkleCount: 12,
minSize: 1,
maxSize: 5,
colors: ['#ffffff', '#ffeaa7', '#74b9ff'],
animationDuration: 1000
});
}); 
