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

Introducción

¿Le gustaría añadir una animación de nieve cayendo a su mensaje de confirmación? Usted puede agregar fácilmente alguna animación al mensaje de confirmación que tendría más de un efecto interactivo usando PHP y JavaScript. En este tutorial, vamos a desglosar cada paso sobre cómo lograr esto.

Creación del formulario

En primer lugar, tendrá que crear su formulario. Para el propósito de este tutorial, hemos creado un formulario de pedido. Una vez completado el pedido, se mostrará un mensaje de confirmación en el que aparecerá nuestra animación de nieve cayendo.

Si necesita ayuda para crear su formulario, visite esta documentación.

Una vez que haya añadido sus campos, haga clic en la pestaña Configuración y, a continuación, en Confirmaciones. Dentro de la ventana del mensaje de confirmación, vamos a añadir un elemento HTML canvas que tiene un ID de canvas para que podamos apuntar exactamente donde caerá el confeti.

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

Sólo tiene que añadir <canvas id="canvas" />

Añadiendo este elemento canvas e ID significa que podemos controlar dónde aparecerá esta nieve. Sólo queremos que aparezca 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 sólo se ejecuta en formularios sin AJAX. Tendrás que desactivar la configuración de AJAX dentro del constructor de formularios. Para desactivar esta configuración, vaya a la pestaña Configuración dentro del generador de formularios y, en la configuración Avanzada, desactive la configuración Activar envío de formularios AJAX.

Añadir el CSS para el canvas wrapper

También tenemos que añadir un poco de CSS personalizado para el <canvas id="canvas" /> wrapper. Si necesita ayuda sobre cómo y dónde añadir CSS personalizado, consulte 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. Si necesitas ayuda para añadir un fragmento de código a tu sitio, 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! Ya has añadido una animación de nieve cayendo a tu mensaje de confirmación. ¿Le gustaría añadir confeti en su lugar? Consulte nuestro tutorial sobre Cómo añadir animación de confeti al mensaje de confirmación.

Relacionado

Acción de referencia: wpforms_wp_footer_end