Come aggiungere effetti di animazione alle transizioni delle interruzioni di pagina

Introduzione

Vuoi aggiungere effetti di animazione alle tue interruzioni di pagina all'interno dei tuoi moduli? Per impostazione predefinita, non c'è animazione quando si passa da una pagina all'altra in un modulo multipagina. Tuttavia, utilizzando JavaScript e un po' di CSS, puoi aggiungere una piccola animazione quando passi dalla pagina successiva alla pagina precedente e viceversa.

Creazione del tuo modulo

Innanzitutto, dovrai creare il tuo modulo multipagina. Se hai bisogno di aiuto per creare questo tipo di modulo, consulta questa documentazione.

Aggiunta dello snippet JavaScript

Ora è il momento di aggiungere lo snippet.

Se hai bisogno di aiuto su come e dove aggiungere snippet al tuo sito, dai un'occhiata a questo tutorial.

/**
 * Add CSS class to trigger CSS animation on Next and Previous button clicks
 *
 * @link https://wpforms.com/developers/how-to-add-animation-effects-to-page-break-transitions/
 */
  
function wpf_dev_animation_page_break( ) {
?>
<script type="text/javascript">
	
        
	jQuery( "button.wpforms-page-button" ).click(function() {

	    //Add the CSS class anim-trans to the form with the ID of 406
            jQuery( "#wpforms-form-406" ).addClass( "anim-trans" );

	setTimeout(function()
    {
        //Remove the class after 2 seconds (2000 miliseconds)
        jQuery( "#wpforms-form-406" ).removeClass( "anim-trans" );

    }, 2000);
});
	
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_animation_page_break', 30 );

Questo snippet verrà eseguito solo sull'ID del modulo 406, quando viene fatto clic sul pulsante di pagina Avanti o Indietro, lo script aggiungerà un nome di classe CSS anim-trans al contenitore del modulo che consentirà il verificarsi delle transizioni CSS. Dopo 2 secondi o 2000 millisecondi, il nome della classe viene rimosso in modo che l'animazione si verifichi ad ogni clic.

Dovrai aggiornare il -406 per corrispondere al tuo ID modulo. Se hai bisogno di assistenza su dove trovare il tuo ID modulo, consulta questo tutorial.

Aggiunta degli effetti di animazione

Ora che è stato aggiunto lo script che aggiungerà la classe CSS, possiamo aggiungere il CSS che creerà l'animazione.

Se hai bisogno di aiuto per aggiungere CSS al tuo sito, dai un'occhiata a questo tutorial.

.transition {
  position:absolute;
  height:100%;
  width:30%;
  background:#d6d6d6;
  transform: skewX(-5deg) translateX(-50px);
  transition:2s all ease-in-out;
  -webkit-transition:2s all ease-in-out;
}

#wpforms-form-406 {
  position:relative;
  z-index:10;
  overflow: hidden;
}

button.wpforms-page-button {
  outline:none;
  border:none;
  text-decoration:none;
  text-transform:uppercase;
  background:#202020;
  color:#eaeaea;
  box-sizing:border-box;
  margin-top:20px;
  padding:10px 40px;
}

.anim-trans {
  animation: anim 2s ease-in-out;
  }

@keyframes anim{
   0% { }
  20%  { z-index:11;\transform: skewX(5deg) translateX(-100%); }
}

Ricorda di aggiornare il CSS sopra in riferimento all'ID del modulo #wpforms-form-406 per corrispondere al tuo ID modulo.

E questo è tutto! Hai aggiunto con successo effetti di animazione al tuo modulo multipagina. Vuoi anche aggiungere uno stile CSS al focus dei campi del modulo? Dai un'occhiata al nostro articolo su Come aggiungere CSS al focus dei campi del modulo.

Correlati

Riferimento Azione: wpforms_wp_footer_end