Come Aggiungere Animazione di Neve Cadente al Tuo Messaggio di Conferma

Introduzione

Vuoi aggiungere un'animazione di neve che cade al tuo messaggio di conferma? Puoi facilmente aggiungere un'animazione al messaggio di conferma che avrebbe un effetto più interattivo utilizzando PHP e JavaScript. In questo tutorial, analizzeremo ogni passaggio su come ottenerlo.

Creazione del tuo modulo

Innanzitutto, dovrai creare il tuo modulo. Ai fini di questo tutorial, abbiamo creato un modulo d'ordine. Una volta completato l'ordine, verrà visualizzato un messaggio di conferma su cui apparirà la nostra animazione di neve che cade.

Se hai bisogno di aiuto per creare il tuo modulo, visita questa documentazione.

Una volta aggiunti i campi, fai clic sulla scheda Impostazioni e quindi fai clic su Conferme. All'interno della finestra Messaggio di conferma, aggiungeremo un elemento canvas HTML con un ID di canvas in modo da poter puntare esattamente dove cadranno i coriandoli.

Una volta nella scheda Conferme, ricorda di fare clic sulla scheda Testo nella casella del messaggio. Dovrai farlo per aggiungere puro HTML in quest'area del messaggio.

Aggiungi semplicemente <canvas id="canvas" />

L'aggiunta di questo elemento canvas e ID significa che possiamo controllare dove apparirà questa neve. Vogliamo che appaia solo nel messaggio di conferma, quindi stiamo aggiungendo un elemento che possiamo puntare specificamente nel nostro snippet di codice.

Questo snippet viene eseguito solo su moduli non AJAX. Dovrai disattivare le impostazioni AJAX all'interno del generatore di moduli. Per disabilitare questa impostazione, vai alla scheda Impostazioni all'interno del generatore di moduli e sotto l'impostazione Avanzate, disabilita l'impostazione Abilita invio modulo AJAX.

Aggiunta del CSS per il wrapper del canvas

Dobbiamo anche aggiungere del CSS personalizzato per il wrapper di <canvas id="canvas" />. Se hai bisogno di aiuto su come e dove aggiungere CSS personalizzato, dai un'occhiata a questo tutorial. Copia e incolla semplicemente questo CSS sul tuo 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 qualsiasi assistenza nell'aggiungere uno snippet al tuo sito, consulta 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ò di cui hai bisogno! Ora hai aggiunto con successo un'animazione di neve che cade al tuo messaggio di conferma. Vuoi aggiungere dei coriandoli invece? Dai un'occhiata al nostro tutorial su Come aggiungere animazioni di coriandoli al messaggio di conferma.

Correlati

Riferimento Azione: wpforms_wp_footer_end