Come Aggiungere Foglie Autunnali Cadenti al Tuo Messaggio di Conferma

Introduzione

Sei interessato ad aggiungere foglie autunnali che cadono al tuo messaggio di conferma quando un modulo viene inviato? Possiamo guidarti attraverso il processo in questo tutorial!

In un tutorial precedente, abbiamo dimostrato come aggiungere coriandoli e fuochi d'artificio che cadono quando il modulo veniva inviato. Questo tutorial segue un approccio simile con alcuni passaggi aggiuntivi.

Creazione del modulo

Per iniziare, crea un nuovo modulo e aggiungi i campi desiderati. Se hai bisogno di assistenza con questo passaggio, fai riferimento a questa documentazione.

Impostazione delle impostazioni di conferma

Per ottenere l'animazione delle foglie autunnali che cadono, dobbiamo apportare alcune modifiche al nostro messaggio di conferma. Per fare ciò, fai clic su Impostazioni e quindi seleziona Conferme. Una volta lì, fai clic sulla scheda Testo poiché il passaggio successivo sarà aggiungere alcuni elementi HTML sotto il messaggio di conferma.

Aggiungere HTML al tuo messaggio di conferma

Ora che sei pronto per includere l'HTML nel tuo messaggio di conferma, copia e incolla semplicemente il seguente codice nella tua casella del messaggio:

<p>Thanks for your feedback!</p>

<canvas id="canvas" />
<img id="leaf" src="http://mysite.com/path-to-image" />

Per il nostro tutorial, stiamo usando una singola foglia che cadrà continuamente in aree casuali della nostra area canvas.

Dovrai cambiare la sorgente dell'immagine per farla corrispondere a dove hai caricato la tua foglia.

Aggiungere lo snippet delle foglie autunnali che cadono

Ora è il momento di aggiungere il codice che inizierà a mettere tutto insieme. Se hai bisogno di aiuto nell'aggiungere snippet di codice al tuo sito, dai un'occhiata a questo tutorial.

/**
 * Add falling autumn leaves to the canvas element on the confirmation message
 *
 * @link  https://wpforms.com/developers/how-to-add-falling-autumn-leaves-to-your-confirmation-message/
 *
 */
 
function wpf_falling_autumn_leaves_animation() {
    ?>

	<script type="text/javascript">
	let canvas = document.querySelector('canvas');
	let ctx = canvas.getContext('2d');

	canvas.width = document.body.clientWidth;
	canvas.height = document.body.clientHeight;

	let width = canvas.width;
	let height = canvas.height;
	let centerX = canvas.width / 2;
	let centerY = canvas.height / 2;
	let leaf = document.querySelector('#leaf');
	let leafs = [];
	let count = 200;

	for (let i = 0; i < count; i++) {  
	  let angle = 15 + Math.random() * 30
	  let dir = [-1,1][Math.floor(Math.random() * 2)];

	  leafs.push({
		x: Math.random() * width,
		y: Math.random() * height,
		w: 30,
		h: 30 * (leaf.height / leaf.width),
		v: 20 / angle,
		a: angle,
		d: dir,
		anim: true
	  });
	}

	function update(dt) {
	  for (let i = 0; i < leafs.length; i++) {
		if (leafs[i].anim) {
		  leafs[i].y += leafs[i].v;

		  if (leafs[i].y > height) {
			leafs[i].y = -120;
			leafs[i].x = Math.random() * width;
		  }
		}
	  }
	}

	function draw(dt) {
	  requestAnimationFrame(draw);
	  update(dt);

	  ctx.clearRect(0, 0, width, height);

	  for (let i = 0; i < leafs.length; i++) {
		ctx.save();

		if (leafs[i].anim) {
		  ctx.translate(leafs[i].x, leafs[i].y);

		  ctx.rotate(
			leafs[i].d * Math.sin(dt * 0.002 * i * 0.01) * (leafs[i].a) * Math.PI / 180
		  ); 
		} 

		ctx.globalAlpha = Math.max(0, leafs[i].y * 0.1);
		ctx.drawImage(leaf, -leafs[i].w / 2, 70, leafs[i].w, leafs[i].h);

		ctx.restore();
	  }
	}

	draw();
	</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_falling_autumn_leaves_animation', 1);

Aggiungere il tuo CSS

Per questo tutorial, aggiungeremo una singola regola CSS al nostro canvas.

canvas {
    display: block;
    position: absolute !important;
    top: 0;
	left: 0;
}

Se hai bisogno di aiuto su dove o come aggiungere il tuo CSS, vedi questo tutorial.

Una volta completati tutti questi passaggi e un utente completa il modulo, vedrà foglie autunnali cadere proprio sopra il messaggio di conferma.

E questo è tutto! Se non hai ancora visto il nostro tutorial sull'aggiunta di coriandoli al tuo messaggio di conferma, assicurati di controllare il tutorial su Come aggiungere animazione di coriandoli al messaggio di conferma.

Correlati

Riferimento Azione: wpforms_wp_footer_end