So fügen Sie eine fallende Schneeanimation zu Ihrer Bestätigungsnachricht hinzu

Einleitung

Möchten Sie Ihrem Bestätigungsnachricht eine fallende Schneeanimation hinzufügen? Sie können der Bestätigungsnachricht ganz einfach eine Animation hinzufügen, die mit PHP und JavaScript eine interaktivere Wirkung erzielt. In diesem Tutorial werden wir jeden Schritt aufschlüsseln, wie Sie dies erreichen können.

Erstellen Ihres Formulars

Zuerst müssen Sie Ihr Formular erstellen. Zu diesem Zweck haben wir ein Bestellformular erstellt. Sobald die Bestellung abgeschlossen ist, wird eine Bestätigungsnachricht angezeigt, auf der unsere fallende Schneeanimation erscheint.

Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, besuchen Sie bitte diese Dokumentation.

Sobald Sie Ihre Felder hinzugefügt haben, klicken Sie auf die Registerkarte Einstellungen und dann auf Bestätigungen. Im Fenster Bestätigungsnachricht werden wir ein HTML-Canvas-Element mit der ID canvas hinzufügen, damit wir genau bestimmen können, wo die Konfetti fallen werden.

Sobald Sie sich auf der Registerkarte Bestätigungen befinden, denken Sie daran, auf der Registerkarte Text in der Nachrichtenbox zu klicken. Sie müssen dies tun, um reines HTML in diesen Nachrichtenbereich einzufügen.

Fügen Sie einfach <canvas id="canvas" /> hinzu

Durch das Hinzufügen dieses Canvas-Elements und der ID können wir steuern, wo dieser Schnee erscheint. Wir möchten, dass er nur in der Bestätigungsnachricht angezeigt wird, daher fügen wir ein Element hinzu, das wir in unserem Code-Snippet gezielt ansprechen können.

Dieses Snippet wird nur für Nicht-AJAX-Formulare ausgeführt. Sie müssten Ihre AJAX-Einstellungen im Formular-Generator deaktivieren. Um diese Einstellung zu deaktivieren, gehen Sie zur Registerkarte Einstellungen im Formular-Generator und deaktivieren Sie unter der Erweiterten Einstellung die Einstellung AJAX-Formularübermittlung aktivieren.

Hinzufügen des CSS für den Canvas-Wrapper

Wir müssen auch benutzerdefiniertes CSS für den <canvas id="canvas" />-Wrapper hinzufügen. Wenn Sie Hilfe benötigen, wie und wo Sie benutzerdefiniertes CSS hinzufügen können, sehen Sie sich dieses Tutorial an. Kopieren und fügen Sie dieses CSS einfach auf Ihrer Website ein.

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

Hinzufügen des Code-Snippets zur Erstellung des Schnees

Jetzt ist es an der Zeit, das Code-Snippet hinzuzufügen, das die Magie bewirkt. Für jede Unterstützung beim Hinzufügen eines Snippets zu Ihrer Website sehen Sie bitte dieses 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);

Und das ist alles, was Sie brauchen! Sie haben nun erfolgreich eine fallende Schneeanimation zu Ihrer Bestätigungsnachricht hinzugefügt. Möchten Sie stattdessen Konfetti hinzufügen? Sehen Sie sich unser Tutorial an So fügen Sie eine Konfetti-Animation zur Bestätigungsnachricht hinzu.

Verwandt

Aktionsreferenz: wpforms_wp_footer_end