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

Einführung

Möchten Sie Ihre Bestätigungsnachricht mit einer Animation von fallendem Schnee versehen? Mit PHP und JavaScript können Sie ganz einfach eine Animation in die Bestätigungsnachricht einfügen, die einen interaktiven Effekt hat. In diesem Tutorial werden wir die einzelnen Schritte aufschlüsseln, um dies zu erreichen.

Ihr Formular erstellen

Zunächst müssen Sie Ihr Formular erstellen. Für die Zwecke dieses Tutorials haben wir ein Bestellformular erstellt. Sobald die Bestellung abgeschlossen ist, wird eine Bestätigungsmeldung angezeigt, auf der unsere Schneeanimation erscheint.

Wenn Sie Hilfe bei der Erstellung 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 " fügen wir ein HTML-Canvas-Element mit der ID " canvas" hinzu, damit wir genau festlegen können, wo das Konfetti fallen soll.

Wenn Sie sich auf der Registerkarte Bestätigungen befinden, denken Sie daran, im Nachrichtenfeld auf die Registerkarte Text zu klicken. Sie müssen dies tun, um reinen HTML-Code in diesen Nachrichtenbereich einzufügen.

Einfach hinzufügen <canvas id="canvas" />

Das Hinzufügen dieses Canvas-Elements und der ID bedeutet, dass wir steuern können, wo dieser Schnee angezeigt wird. Wir möchten, dass er nur in der Bestätigungsmeldung angezeigt wird, also fügen wir ein Element hinzu, das wir in unserem Codeschnipsel gezielt ansteuern können.

Dieses Snippet läuft nur auf Nicht-AJAX-Formularen. Sie müssen Ihre AJAX-Einstellungen innerhalb des Formularerstellers deaktivieren. Um diese Einstellung zu deaktivieren, gehen Sie auf die Registerkarte " Einstellungen" im Formular-Builder und deaktivieren Sie unter der Einstellung " Erweitert" die Einstellung "AJAX-Formularübermittlung aktivieren ".

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

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

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

Hinzufügen des Codeschnipsels zur Erzeugung des Schnees

Jetzt ist es an der Zeit, das Code-Snippet hinzuzufügen, das die Magie in Gang setzt. Wenn Sie Hilfe beim Hinzufügen eines Snippets zu Ihrer Website benötigen, lesen 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 Schneeanimation zu Ihrer Bestätigungsnachricht hinzugefügt. Möchten Sie stattdessen etwas Konfetti hinzufügen? Sehen Sie sich unsere Anleitung zum Hinzufügen einer Konfetti-Animation zur Bestätigungsnachricht an.

Verwandte Seiten

Referenz der Aktion: wpforms_wp_footer_end