Comment ajouter une animation de neige tombante à votre message de confirmation

Introduction

Souhaitez-vous ajouter une animation de neige tombante à votre message de confirmation ? Vous pouvez facilement ajouter une animation au message de confirmation qui aura un effet plus interactif en utilisant PHP et JavaScript. Dans ce tutoriel, nous allons détailler chaque étape pour y parvenir.

Création du formulaire

Tout d'abord, vous devez créer votre formulaire. Pour les besoins de ce tutoriel, nous avons créé un formulaire de commande. Une fois la commande terminée, un message de confirmation s'affichera sur lequel apparaîtra notre animation de neige tombante.

Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter cette documentation.

Une fois que vous avez ajouté vos champs, cliquez sur l'onglet Paramètres, puis sur Confirmations. Dans la fenêtre Message de confirmation, nous allons ajouter un élément HTML canvas dont l'ID est canvas afin de pouvoir cibler exactement l'endroit où les confettis tomberont.

Une fois dans l'onglet Confirmations, n'oubliez pas de cliquer sur l'onglet Texte de la boîte de message. Vous devrez le faire pour ajouter du HTML pur dans cette zone de message.

Il suffit d'ajouter <canvas id="canvas" />

L'ajout de cet élément de canevas et de cet identifiant nous permet de contrôler l'endroit où cette neige apparaîtra. Nous voulons qu'elle n'apparaisse que dans le message de confirmation, c'est pourquoi nous ajoutons un élément que nous pouvons cibler spécifiquement dans notre extrait de code.

Ce snippet ne fonctionne que sur les formulaires non-AJAX. Vous devez désactiver vos paramètres AJAX dans le constructeur de formulaires. Pour désactiver ce paramètre, allez dans l'onglet Paramètres à l'intérieur du générateur de formulaires et sous le paramètre Avancé, désactivez le paramètre Activer la soumission de formulaire AJAX.

Ajouter le CSS pour l'enveloppe du canevas

Nous devons également ajouter quelques feuilles de style CSS personnalisées pour le fichier <canvas id="canvas" /> wrapper. Si vous avez besoin d'aide pour savoir comment et où ajouter des feuilles de style CSS personnalisées, veuillez consulter ce tutoriel. Il suffit de copier et de coller ce CSS sur votre site.

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

Ajout de l'extrait de code pour créer la neige

Il est maintenant temps d'ajouter l'extrait de code qui rendra la magie possible. Si vous avez besoin d'aide pour ajouter un extrait de code à votre site, veuillez consulter ce tutoriel.

/**
 * 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);

Et c'est tout ce dont vous avez besoin ! Vous avez maintenant ajouté avec succès une animation de neige tombante à votre message de confirmation. Vous souhaitez ajouter des confettis à la place ? Consultez notre tutoriel sur Comment ajouter une animation de confettis à un message de confirmation.

En rapport

Référence de l'action : wpforms_wp_footer_end