Como Adicionar Folhas de Outono Caindo à sua Mensagem de Confirmação

Introdução

Você tem interesse em adicionar folhas de outono caindo à sua mensagem de confirmação quando um formulário é enviado? Podemos guiá-lo através do processo neste tutorial!

Em um tutorial anterior, demonstramos como adicionar confetes e fogos de artifício caindo quando o formulário era enviado. Este tutorial segue uma abordagem semelhante com algumas etapas adicionais.

Criando o formulário

Para começar, crie um novo formulário e adicione os campos desejados. Se precisar de ajuda nesta etapa, consulte esta documentação.

Configurando as configurações de confirmação

Para obter a animação de folhas de outono caindo, precisamos fazer algumas alterações em nossa mensagem de confirmação. Para fazer isso, clique em Configurações e, em seguida, selecione Confirmações. Uma vez lá, clique na guia Texto, pois o próximo passo será adicionar alguns elementos HTML sob a mensagem de confirmação.

Adicionando HTML à sua mensagem de confirmação

Agora que você está preparado para incluir HTML em sua mensagem de confirmação, basta copiar e colar o seguinte código em sua caixa de mensagem:

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

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

Para o nosso tutorial, estamos usando uma única folha que cairá continuamente em áreas aleatórias de nossa área de tela.

Você precisará alterar a origem da imagem para corresponder a onde você carregou sua folha.

Adicionando o trecho de folhas de outono caindo

Agora é hora de adicionar o código que começará a juntar tudo isso. Se precisar de ajuda para adicionar trechos de código ao seu site, confira este 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);

Adicionando seu CSS

Para este tutorial, adicionaremos uma única regra CSS à nossa tela.

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

Se precisar de ajuda sobre onde ou como adicionar seu CSS, consulte este tutorial.

Depois que todas essas etapas forem concluídas e um usuário preencher o formulário, ele verá folhas de outono caindo sobre a mensagem de confirmação.

E é isso! Se você ainda não viu nosso tutorial sobre como adicionar confetes à sua mensagem de confirmação, certifique-se de conferir o tutorial sobre Como Adicionar Animação de Confetes à Mensagem de Confirmação.

Relacionado

Referência de Ação: wpforms_wp_footer_end