Добавление эффектов конфетти с помощью JavaScript: подробное руководство

Хотите добавить праздничные моменты в ваше веб-приложение? Анимации конфетти на JavaScript превращают обычные взаимодействия в запоминающиеся впечатления. Будь то успешная покупка, завершение формы или разблокировка достижения — конфетти добавляет ту самую искру восторга, которую пользователи запоминают.

Это руководство охватывает два практических подхода: создание легковесного эффекта конфетти на HTML Canvas с нуля и использование готовых для продакшена библиотек, таких как js-confetti и canvas-confetti, для более быстрой реализации.

Выбор подхода к конфетти

Быстрая интеграция библиотеки (развертывание за 2 минуты)

Для большинства продакшен-приложений зарекомендовавшие себя библиотеки для анимации конфетти на JavaScript предлагают лучший баланс функциональности и простоты.

js-confetti выделяется архитектурой без зависимостей и поддержкой эмодзи:

<!-- Установка через CDN -->
<script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>

// Базовое использование
const jsConfetti = new JSConfetti()

// Запуск разноцветного конфетти
jsConfetti.addConfetti({
  confettiColors: ['#ff0a54', '#ff477e', '#ff7096'],
  confettiNumber: 100
})

// Или использование эмодзи
jsConfetti.addConfetti({
  emojis: ['🎉', '✨', '💫', '🎊'],
  emojiSize: 50,
  confettiNumber: 30
})

canvas-confetti предлагает больше возможностей настройки физики:

<!-- Установка через CDN -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@latest/dist/confetti.browser.min.js"></script>

// Эффект фейерверка из определенной точки
confetti({
  particleCount: 100,
  spread: 70,
  origin: { x: 0.5, y: 0.6 }, // Центр, немного ниже середины
  colors: ['#bb0000', '#ffffff']
})

Обе библиотеки легковесны, хорошо поддерживаются и автоматически обрабатывают очистку. Библиотека js-confetti возвращает Promise по завершении анимации, что делает её идеальной для цепочки действий:

await jsConfetti.addConfetti()
console.log('Празднование завершено!')
// Переход к следующему действию

Создание конфетти на чистом Canvas (без зависимостей)

Для полного контроля или когда важен каждый байт, реализация конфетти на чистом HTML Canvas требует минимального кода:

const canvas = document.getElementById('confetti-canvas')
const ctx = canvas.getContext('2d')
const particles = []

// Изменение размера canvas под окно
canvas.width = window.innerWidth
canvas.height = window.innerHeight

// Создание частицы со случайными свойствами
function createParticle() {
  return {
    x: Math.random() * canvas.width,
    y: -10,
    vx: (Math.random() - 0.5) * 2,
    vy: Math.random() * 3 + 2,
    color: `hsl(${Math.random() * 360}, 70%, 50%)`,
    size: Math.random() * 3 + 2
  }
}

// Цикл анимации
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  
  particles.forEach((p, index) => {
    p.x += p.vx
    p.y += p.vy
    p.vy += 0.1 // Гравитация
    
    ctx.fillStyle = p.color
    ctx.fillRect(p.x, p.y, p.size, p.size)
    
    // Удаление частиц за пределами экрана
    if (p.y > canvas.height) {
      particles.splice(index, 1)
    }
  })
  
  if (particles.length > 0) {
    requestAnimationFrame(animate)
  }
}

// Запуск взрыва конфетти
function triggerConfetti() {
  for (let i = 0; i < 100; i++) {
    particles.push(createParticle())
  }
  animate()
}

Этот подход дает вам полный контроль над физикой, формами частиц и рендерингом. Однако вам придется самостоятельно обрабатывать очистку, оптимизацию производительности и совместимость с браузерами.

Лучшие практики для эффектов конфетти в продакшене

Уважайте предпочтения пользователей

Всегда проверяйте чувствительность к движению перед запуском эффектов анимации конфетти на JavaScript:

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches

if (!prefersReducedMotion) {
  jsConfetti.addConfetti()
} else {
  // Показать статичное сообщение о праздновании вместо анимации
  showSuccessMessage()
}

Оптимизация для производительности на мобильных устройствах

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

const isMobile = window.innerWidth < 768
const particleCount = isMobile ? 50 : 150

jsConfetti.addConfetti({
  confettiNumber: particleCount
})

Очистка после празднования

canvas-confetti автоматически обрабатывает очистку. js-confetti предоставляет метод clearCanvas() для сброса canvas, хотя он не отменяет уже запущенные анимации. Для реализаций на чистом JavaScript всегда очищайте ресурсы:

// Для js-confetti
jsConfetti.clearCanvas()

// Для реализации на чистом JavaScript
function cleanup() {
  particles.length = 0
  ctx.clearRect(0, 0, canvas.width, canvas.height)
}

Стратегические паттерны использования

Эффекты конфетти работают лучше всего, когда зарезервированы для действительно праздничных моментов:

• ✅ Завершение покупки
• ✅ Успешное создание аккаунта
• ✅ Разблокировка достижения
• ✅ Достижение вехи
• ❌ Каждый клик по кнопке
• ❌ Загрузка страницы
• ❌ Незначительные взаимодействия

Примеры реализации

Празднование клика по кнопке

document.getElementById('purchase-btn').addEventListener('click', async () => {
  // Сначала обработать действие
  const success = await processPurchase()
  
  if (success) {
    // Затем отпраздновать
    jsConfetti.addConfetti({
      confettiColors: ['#00ff00', '#ffffff'],
      confettiNumber: 75
    })
  }
})

Конфетти с привязкой к позиции

Только canvas-confetti поддерживает запуск конфетти из точных позиций на экране. С js-confetti конфетти всегда заполняет весь canvas без контроля точки происхождения.

// canvas-confetti: Запуск из координат клика мыши
element.addEventListener('click', (e) => {
  confetti({
    particleCount: 80,
    spread: 70,
    origin: {
      x: e.clientX / window.innerWidth,
      y: e.clientY / window.innerHeight
    }
  })
})

Это позволяет создавать эффекты, такие как взрывы от нажатой кнопки, боковые пушки или фейерверки в определенных местах.

Заключение

Эффекты конфетти на JavaScript превращают рутинные взаимодействия в запоминающиеся моменты. Хотя реализации на чистом Canvas предлагают полный контроль, библиотеки, такие как js-confetti и canvas-confetti, предоставляют готовые для продакшена решения, которые обрабатывают сложности кроссбраузерной совместимости, оптимизации производительности и очистки.

Выбирайте библиотеки, когда вам нужна быстрая, надежная реализация с хорошими настройками по умолчанию. Создавайте на чистом JavaScript, когда нужен точный контроль или отсутствие зависимостей. В любом случае помните, что лучшее конфетти используется экономно — сохраняйте его для моментов, которые действительно заслуживают празднования.

Часто задаваемые вопросы

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.