Come aggiungere l'animazione della neve che cade al vostro messaggio di conferma

Introduzione

Volete aggiungere un'animazione della neve che cade al vostro messaggio di conferma? È possibile aggiungere facilmente un'animazione al messaggio di conferma che abbia un effetto più interattivo utilizzando PHP e JavaScript. In questo tutorial, spiegheremo ogni passo per ottenere questo risultato.

Creazione del modulo

Per prima cosa, è necessario creare il modulo. Per lo scopo di questa esercitazione, abbiamo creato un modulo d'ordine. Una volta completato l'ordine, verrà visualizzato un messaggio di conferma sul quale apparirà l'animazione della neve che cade.

Se avete bisogno di aiuto per creare il vostro modulo, visitate questa documentazione.

Una volta aggiunti i campi, fare clic sulla scheda Impostazioni e poi su Conferme. All'interno della finestra del messaggio di conferma, aggiungeremo un elemento HTML canvas con un ID di canvas, in modo da poter indirizzare esattamente il punto in cui cadranno i coriandoli.

Una volta entrati nella scheda Conferme, ricordarsi di fare clic sulla scheda Testo della casella del messaggio. Questa operazione è necessaria per aggiungere HTML puro in quest'area del messaggio.

È sufficiente aggiungere <canvas id="canvas" />

L'aggiunta dell'elemento canvas e dell'ID ci consente di controllare dove apparirà la neve. Vogliamo che appaia solo nel messaggio di conferma, quindi aggiungiamo un elemento che possiamo indirizzare in modo specifico nel nostro frammento di codice.

Questo snippet funziona solo su form non AJAX. È necessario disattivare le impostazioni AJAX all'interno del costruttore di moduli. Per disabilitare questa impostazione, andare alla scheda Impostazioni del costruttore di moduli e, sotto l'impostazione Avanzate, disabilitare l'impostazione Abilita invio modulo AJAX.

Aggiungere il CSS per il wrapper del canvas

È necessario aggiungere anche del CSS personalizzato per il campo <canvas id="canvas" /> wrapper. Se avete bisogno di aiuto su come e dove aggiungere i CSS personalizzati, consultate questa esercitazione. È sufficiente copiare e incollare questo CSS nel vostro sito.

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

Aggiunta dello snippet di codice per creare la neve

Ora è il momento di aggiungere lo snippet di codice che farà accadere la magia. Per assistenza nell'aggiunta di uno snippet al vostro sito, consultate questo 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 questo è tutto ciò che serve! Ora avete aggiunto con successo un'animazione della neve che cade al vostro messaggio di conferma. Volete invece aggiungere dei coriandoli? Consultate il nostro tutorial su Come aggiungere un'animazione di coriandoli al messaggio di conferma.

Correlato

Riferimento azione: wpforms_wp_footer_end