Confetti Animation Генератор
Создайте эффект разлетающегося конфетти на CSS и JS для вашего сайта. Готовый код в один клик. Бесплатно, без регистрации, прямо в браузере.
1function confettiBurst(canvas, {count=160, gravity=4, colors=["#4F46E5","#EC4899","#F59E0B","#10B981"]}={}) {2 const ctx = canvas.getContext('2d');3 const ps = Array.from({length: count}, () => ({4 x: canvas.width/2, y: canvas.height,5 vx: (Math.random()-.5)*10, vy: -(6+Math.random()*8),6 size: 5+Math.random()*7, color: colors[Math.random()*colors.length|0], rot: 0, vr:(Math.random()-.5)*.37 }));8 (function tick(){9 ctx.clearRect(0,0,canvas.width,canvas.height);10 ps.forEach(p => { p.vy+=gravity*.06; p.x+=p.vx; p.y+=p.vy; p.rot+=p.vr;11 ctx.save(); ctx.translate(p.x,p.y); ctx.rotate(p.rot); ctx.fillStyle=p.color;12 ctx.fillRect(-p.size/2,-p.size/2,p.size,p.size*.6); ctx.restore(); });13 if (ps.some(p => p.y < canvas.height+40)) requestAnimationFrame(tick);14 })();15}Об этом инструменте
Генератор анимации конфетти — творческий инструмент для дизайнеров, работающий прямо в браузере. Получите мгновенный предпросмотр, настройте по своему вкусу и экспортируйте в проект.
Инструмент рассчитан на ежедневное использование. Он справляется со всем — от разовых задач до регулярных рабочих процессов; загружается за миллисекунды, работает офлайн после первой загрузки и плавно работает на компьютере, планшете и смартфоне. Интерфейс намеренно простой, чтобы вы сосредоточились на результате, а не на настройках.
Распространённые сценарии: тестировать стили перед применением в реальных CSS-файлах, быстро создавать визуальные прототипы для дизайнеров и клиентов, экспортировать переиспользуемые design-токены для дизайн-системы, наглядно доносить концепции дизайна. Будь вы студент, специалист или просто человек, которому нужен быстрый инструмент, Генератор анимации конфетти позволяет выполнить задачу за секунды.
Конфиденциальность заложена с самого начала. Поскольку вся обработка происходит в браузере (на стороне клиента), ни одна система аналитики, рекламная сеть или бэкенд не видит, что вы вводите или генерируете. Откройте вкладку «Сеть» в браузере во время использования инструмента и вы сами убедитесь, что ни один внешний запрос с вашими данными не отправляется. Поэтому Генератор анимации конфетти также идеально подходит для конфиденциального контента (медицинского, юридического, финансового), который нельзя передавать третьим лицам.
Генератор анимации конфетти — часть ToolHub, бесплатной коллекции без рекламы из более чем 750 браузерных инструментов для PDF, изображений, текста, калькуляторов, разработчиков, дизайна, соцсетей, образования, бизнеса, здоровья и многого другого.
Как использовать
- 1Настройте параметры с помощью доступных элементов управления
- 2Просмотрите результат в режиме живого предпросмотра
- 3Доработайте до удовлетворительного результата
- 4Скопируйте код или скачайте результат
Основные возможности
- Обработка на 100% на стороне клиента: ваши данные никогда не покидают браузер
- Полностью бесплатно: без регистрации, без email и без оплаты
- Работает на компьютере, планшете и смартфоне (области нажатия 44px)
- Тёмная тема и 17 языков встроены
- Мгновенная генерация: без ограничений по размеру файла
Советы профессионалов
- Добавьте инструмент в закладки, чтобы в следующий раз открыть его одним кликом: все настройки сохраняются в localStorage.
- Для повторного использования проверьте, что вы используете современный браузер с поддержкой CSS3 и SVG, чтобы инструмент работал на максимальной скорости.
- Нашли ошибку или хотите новую функцию? Используйте форму обратной связи внизу страницы; мы читаем каждое предложение.