Como adicionar uma 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 adicionar facilmente alguma animação à mensagem de confirmação que tenha um efeito mais interativo usando PHP e JavaScript. Neste tutorial, detalharemos cada etapa de como fazer isso.

Criando seu formulário

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

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

Depois de adicionar os campos, clique na guia Settings (Configurações ) e, em seguida, clique em Confirmations (Confirmações). Dentro da janela Confirmation Message (Mensagem de confirmação), adicionaremos um elemento de tela HTML com um ID de tela para que possamos definir exatamente onde o confete cairá.

Quando estiver na guia Confirmações, lembre-se de clicar na guia Texto na caixa de mensagem. Você precisará fazer isso para adicionar HTML puro a essa área de mensagem.

Basta adicionar <canvas id="canvas" />

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

Esse snippet só é executado em formulários não AJAX. Você precisaria desativar as configurações de AJAX dentro do construtor de formulários. Para desativar essa configuração, vá para a guia Settings (Configurações ) dentro do construtor de formulários e, na configuração Advanced (Avançado ), desative a configuração Enable AJAX form submission (Ativar envio de formulário AJAX ).

Adição do CSS para o invólucro da tela

Também precisamos adicionar algumas CSS personalizadas para o <canvas id="canvas" /> wrapper. Se você precisar de ajuda sobre como e onde adicionar CSS personalizado, Dê uma olhada neste tutorial. Basta copiar e colar esse CSS em seu site.

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

Adição do trecho de código para criar a neve

Agora é hora de adicionar o snippet de código que fará a mágica acontecer. Se precisar de ajuda para adicionar um snippet ao seu site, consulte 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 isso é tudo o que você precisa! Agora você adicionou com êxito uma animação de neve caindo à sua mensagem de confirmação. Gostaria de adicionar um pouco de confete? Confira nosso tutorial sobre Como adicionar animação de confete à mensagem de confirmação.

Relacionado

Referência da ação: wpforms_wp_footer_end