Como adicionar uma animação de neve a cair à sua mensagem de confirmação

Introdução

Gostaria de adicionar uma animação de neve a cair à sua mensagem de confirmação? Pode adicionar facilmente alguma animação à mensagem de confirmação que tenha um efeito mais interativo utilizando PHP e JavaScript. Neste tutorial, detalharemos cada etapa de como fazer isso.

Criar o seu formulário

Primeiro, tem de criar o seu formulário. Para efeitos deste tutorial, criámos um formulário de encomenda. Quando a encomenda estiver concluída, será apresentada uma mensagem de confirmação na qual aparecerá a animação da neve a cair.

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

Depois de adicionar os campos, clique no separador Definições e, em seguida, clique em Confirmações. Dentro da janela Mensagem de confirmação, vamos adicionar um elemento HTML canvas com um ID de canvas, para que possamos definir exatamente onde os confettis vão cair.

Uma vez dentro do separador Confirmações, lembre-se de clicar no separador Texto na caixa de mensagem. Terá de o fazer para adicionar HTML puro a esta área de mensagem.

Basta adicionar <canvas id="canvas" />

Adicionar este elemento de ecrã e ID significa que podemos controlar onde esta neve aparecerá. Só queremos que apareça na mensagem de confirmação, pelo que estamos a adicionar um elemento que podemos direcionar especificamente no nosso fragmento de código.

Este snippet só é executado em formulários não AJAX. É necessário desativar as configurações de AJAX dentro do construtor de formulários. Para desativar essa configuração, vá para a guia Configurações dentro do construtor de formulários e, na configuração Avançado, desative a configuração Ativar envio de formulário AJAX.

Adicionar o CSS para o invólucro do ecrã

Também precisamos de adicionar algumas CSS personalizadas para o <canvas id="canvas" /> wrapper. Se precisar de ajuda sobre como e onde adicionar CSS personalizadas, consulte este tutorial. Basta copiar e colar este CSS no seu sítio.

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

Adicionar o trecho de código para criar a neve

Agora é hora de adicionar o snippet de código que fará a mágica acontecer. Para obter ajuda sobre como 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 é tudo o que precisa! Adicionou com êxito uma animação de neve a cair à sua mensagem de confirmação. Gostaria de adicionar alguns confetes? Confira nosso tutorial sobre Como adicionar animação de confete à mensagem de confirmação.

Relacionadas

Referência da ação: wpforms_wp_footer_end