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 aurait un effet plus interactif en utilisant PHP et JavaScript. Dans ce tutoriel, nous allons détailler chaque étape pour y parvenir.

Création de votre formulaire

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

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 de canevas HTML avec un ID de canvas afin de pouvoir cibler exactement où les confettis tomberont.

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

Ajoutez simplement <canvas id="canvas" />

L'ajout de ce canevas et de cet ID nous permet de contrôler où cette neige apparaîtra. Nous voulons qu'elle ne s'affiche que dans le message de confirmation, nous ajoutons donc un élément que nous pouvons cibler spécifiquement dans notre extrait de code.

Cet extrait ne s'exécute que sur les formulaires non-AJAX. Vous devrez désactiver vos paramètres AJAX dans le constructeur de formulaires. Pour désactiver ce paramètre, allez dans l'onglet Paramètres du constructeur de formulaires et, sous le paramètre Avancé, désactivez le paramètre Activer la soumission de formulaire AJAX.

Ajout du CSS pour le wrapper du canevas

Nous devons également ajouter du CSS personnalisé pour le wrapper de <canvas id="canvas" />. Si vous avez besoin d'aide sur comment et où ajouter du CSS personnalisé, veuillez consulter ce tutoriel. Copiez et collez simplement 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 fera la magie. Pour toute aide sur l'ajout d'un extrait à 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. Souhaitez-vous ajouter des confettis à la place ? Consultez notre tutoriel sur Comment ajouter une animation de confettis au message de confirmation.

Articles associés

Référence d’action : wpforms_wp_footer_end