Como Adicionar Animação de Neve Caindo à sua Mensagem de Confirmação

Introdução

Gostaria de adicionar uma animação de neve caindo à sua mensagem de confirmação? Você pode facilmente adicionar alguma animação à mensagem de confirmação que teria um efeito mais interativo usando PHP e JavaScript. Neste tutorial, detalharemos cada etapa de como conseguir isso.

Criando seu formulário

Primeiro, você precisará criar seu formulário. Para fins deste tutorial, criamos um formulário de pedido. Assim que o pedido for concluído, uma mensagem de confirmação será exibida na qual nossa animação de neve caindo aparecerá.

Se precisar de ajuda para criar seu formulário, por favor visite esta documentação.

Depois de adicionar seus campos, clique na aba Configurações e depois em Confirmações. Dentro da janela Mensagem de Confirmação, vamos adicionar um elemento de tela HTML com um ID de canvas para que possamos direcionar exatamente onde os confetes cairão.

Uma vez dentro da aba Confirmações, lembre-se de clicar na aba Texto na caixa de mensagem. Você precisará fazer isso para adicionar HTML puro a esta área de mensagem.

Simplesmente adicione <canvas id="canvas" />

Adicionar este elemento de tela e ID significa que podemos controlar onde esta neve aparecerá. Queremos que ela apareça apenas na mensagem de confirmação, então estamos adicionando um elemento que podemos direcionar especificamente em nosso trecho de código.

Este trecho só é executado em formulários não-AJAX. Você precisaria desativar suas configurações AJAX dentro do construtor de formulários. Para desativar esta configuração, vá para a aba Configurações dentro do construtor de formulários e, em Avançado, desative a configuração Habilitar envio de formulário AJAX.

Adicionando o CSS para o wrapper do canvas

Também precisamos adicionar um CSS personalizado para o wrapper do <canvas id="canvas" />. Se precisar de ajuda sobre como e onde adicionar CSS personalizado, por favor, confira este tutorial. Simplesmente copie e cole este CSS em seu site.

canvas#canvas {
    position: absolute;
    top: 0;
    left: 0;
}

Adicionando o trecho de código para criar a neve

Agora é hora de adicionar o trecho de código que fará a mágica acontecer. Para qualquer assistência em adicionar um trecho ao seu site, por favor, veja este tutorial.

/**
 * Add falling snow to the canvas element on the confirmation message
 *
 * @link  https://wpforms.com/developers/how-to-add-falling-snow-animation-to-your-confirmation-message/
 */
 
function wpf_dev_winter_scene_animation() {
?>

<script type="text/javascript">
    //If the canvas ID does not exist on the page, this script will not run

    if (document.querySelector( '#canvas' ) !== null) {
//canvas init
	var canvas = document.getElementById( "canvas" );
	var ctx = canvas.getContext( "2d" );
	
	//canvas dimensions
	var W = window.innerWidth;
	var H = window.innerHeight;
	canvas.width = W;
	canvas.height = H;
	
	//snowflake particles
	var mp = 50; //max particles
	var particles = [];
	for(var i = 0; i < mp; i++)
	{
		particles.push({
			x: Math.random()*W, //x-coordinate
			y: Math.random()*H, //y-coordinate
			r: Math.random()*4+1, //radius
			d: Math.random()*mp //density
		})
	}
	
	//Lets draw the flakes
	function draw()
	{
		ctx.clearRect(0, 0, W, H);
		
		ctx.fillStyle = "white";
		ctx.beginPath();
		for(var i = 0; i < mp; i++)
		{
			var p = particles[i];
			ctx.moveTo(p.x, p.y);
			ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
		}
		ctx.fill();
		update();
	}
	
	//Function to move the snowflakes
	//angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes
	var angle = 0;
	function update()
	{
		angle += 0.01;
		for(var i = 0; i < mp; i++)
		{
			var p = particles[i];
			//Updating X and Y coordinates
			//We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards
			//Every particle has its own density which can be used to make the downward movement different for each flake
			//Lets make it more random by adding in the radius
			p.y += Math.cos(angle+p.d) + 1 + p.r/2;
			p.x += Math.sin(angle) * 2;
			
			//Sending flakes back from the top when it exits
			//Lets make it a bit more organic and let flakes enter from the left and right also.
			if(p.x > W+5 || p.x < -5 || p.y > H)
			{
				if(i%3 > 0) //66.67% of the flakes
				{
					particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};
				}
				else
				{
					//If the flake is exitting from the right
					if(Math.sin(angle) > 0)
					{
						//Enter from the left
						particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};
					}
					else
					{
						//Enter from the right
						particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};
					}
				}
			}
		}
	}
	
	//animation loop
	setInterval(draw, 25);

    }
</script>

<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_winter_scene_animation', 1);

E é tudo o que você precisa! Agora você adicionou com sucesso uma animação de neve caindo à sua mensagem de confirmação. Gostaria de adicionar confetes em vez disso? Confira nosso tutorial sobre Como Adicionar Animação de Confetes à Mensagem de Confirmação.

Relacionado

Referência de Ação: wpforms_wp_footer_end