Cómo añadir una animación de nieve cayendo a tu mensaje de confirmación

Introducción

¿Te gustaría añadir una animación de nieve cayendo a tu mensaje de confirmación? Puedes añadir fácilmente una animación al mensaje de confirmación que tendría un efecto más interactivo usando PHP y JavaScript. En este tutorial, desglosaremos cada paso sobre cómo lograr esto.

Creación de su formulario

Primero, necesitarás crear tu formulario. Para el propósito de este tutorial, hemos creado un formulario de pedido. Una vez que el pedido esté completo, se mostrará un mensaje de confirmación en el que aparecerá nuestra animación de nieve cayendo.

Si necesitas ayuda para crear tu formulario, por favor visita esta documentación.

Una vez que hayas añadido tus campos, haz clic en la pestaña Configuración y luego en Confirmaciones. Dentro de la ventana Mensaje de confirmación, vamos a añadir un elemento de lienzo HTML con un ID de canvas para poder apuntar exactamente a dónde caerá el confeti.

Una vez dentro de la pestaña Confirmaciones, recuerda hacer clic en la pestaña Texto en el cuadro de mensaje. Necesitarás hacer esto para poder añadir HTML puro en esta área de mensaje.

Simplemente añade <canvas id="canvas" />

Añadir este elemento de lienzo e ID significa que podemos controlar dónde aparecerá esta nieve. Solo queremos que se muestre en el mensaje de confirmación, por lo que estamos añadiendo un elemento al que podemos apuntar específicamente en nuestro fragmento de código.

Este fragmento solo se ejecuta en formularios no AJAX. Necesitarías desactivar tu configuración AJAX dentro del constructor de formularios. Para desactivar esta configuración, ve a la pestaña Configuración dentro del constructor de formularios y, en la configuración Avanzada, desactiva la configuración Habilitar envío de formularios AJAX.

Añadir el CSS para el contenedor del lienzo

También necesitamos añadir algo de CSS personalizado para el contenedor de <canvas id="canvas" />. Si necesitas ayuda sobre cómo y dónde añadir CSS personalizado, por favor consulta este tutorial. Simplemente copia y pega este CSS en tu sitio.

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

Añadir el fragmento de código para crear la nieve

Ahora es el momento de añadir el fragmento de código que hará que la magia suceda. Para cualquier ayuda al añadir un fragmento a tu sitio, por favor consulta 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);

¡Y eso es todo lo que necesitas! Ahora has añadido con éxito una animación de nieve cayendo a tu mensaje de confirmación. ¿Te gustaría añadir confeti en su lugar? Consulta nuestro tutorial sobre Cómo añadir una animación de confeti a un mensaje de confirmación.

Relacionado

Referencia de acción: wpforms_wp_footer_end