Como Fazer o Efeito de Jogar Confetes com JavaScript

Introdução

Usar efeitos visuais é uma maneira de humanizar as relações das pessoas com a tecnologia. Este tipo de efeito pode ser útil durante o Carnaval, num período festivo ou para parabenizar o usuário por algum objetivo alcançado.

Neste tutorial, veremos como fazer o efeito de "jogar confete" com a biblioteca JavaScript canvas-confetti.

Código Pronto para Uso

Aqui está o código para adicionar o efeito de confetes em seu projeto:

<button id="animate_confetti">🎉 Jogar confete!</button>

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js"></script>
<script>
document.getElementById("animate_confetti").addEventListener("click", () => {

	let params = {
		particleCount: 500, // Quantidade de confetes
		spread: 90, // O quanto eles se espalham
		startVelocity: 70, // Velocidade inicial
		origin: { x: 0, y: 0.5 }, // Posição inicial na tela
		angle: 45 // Ângulo em que os confetes serão lançados
	};

	// Joga confetes da esquerda pra direita
	confetti(params);

	// Joga confetes da direita para a esquerda
	params.origin.x = 1;
	params.angle = 135;
	confetti(params);

});
</script>

Demonstração

Clique no botão abaixo e veja como funciona:

Explicando o Código

Nesta seção, vamos destrinchar o código para entender como cada parte contribui para criar o efeito de jogar confetes na tela.

Inclusão da Biblioteca

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js"></script>

A primeira linha inclui a biblioteca 'canvas-confetti' no seu projeto. Essa biblioteca é responsável por gerar o efeito de confetes e é essencial para a execução do código.

Botão de Acionamento

<button id="animate_confetti">🎉 Jogar confete!</button>

Esta linha cria um botão com o texto "🎉 Jogar confete!" que, quando clicado, acionará o efeito de confete. O botão é identificado pelo id="animate_confetti".

Clique no botão

document.getElementById("animate_confetti").addEventListener("click", () => {

Este código configura a ação que acontece quando o usuário clica no botão.

Configuração dos Parâmetros do Efeito

let params = {
	particleCount: 500, // Quantidade de confetes
	spread: 90, // O quanto eles se espalham
	startVelocity: 70, // Velocidade inicial
	origin: { x: 0, y: 0.5 }, // Posição inicial na tela
	angle: 45 // Ângulo em que os confetes serão lançados
};

O objeto params ajusta aspectos diferentes do efeito.

Executando a Animação

// Joga confetes da esquerda pra direita
confetti(params);

// Joga confetes da direita para a esquerda
params.origin.x = 1;
params.angle = 135;
confetti(params);

Aqui, chamamos a função confetti() duas vezes. Na primeira chamada, os confetes são lançados da esquerda para a direita da tela, usando os valores originais de params. Após isso, modificamos o origin.x para 1 e o angle para 135, fazendo com que, na segunda chamada, os confetes sejam lançados da direita para a esquerda em ângulo oposto.