Come aggiungere effetti di animazione alle transizioni di interruzione di pagina

Introduzione

Volete aggiungere degli effetti di animazione alle interruzioni di pagina all'interno dei vostri moduli? Per impostazione predefinita, non c'è animazione quando si passa da una pagina all'altra in un modulo a più pagine. Tuttavia, utilizzando JavaScript e alcuni CSS è possibile aggiungere una piccola animazione quando si passa dalla pagina successiva a quella precedente e viceversa.

Creazione del modulo

Per prima cosa, è necessario creare il modulo multi-pagina. Se avete bisogno di aiuto per creare questo tipo di modulo, consultate questa documentazione.

Aggiunta dello snippet JavaScript

Ora è il momento di aggiungere lo snippet.

Se avete bisogno di aiuto su come e dove aggiungere gli snippet al vostro sito, consultate 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 frammento verrà eseguito solo sul modulo ID 406; quando si fa clic sul pulsante Pagina successiva o Pagina precedente, lo script aggiungerà al contenitore del modulo un nome di classe CSS anim-trans che consentirà di eseguire le transizioni CSS. Dopo 2 secondi o 2000 milisecondi, il nome della classe viene rimosso, in modo che l'animazione avvenga a ogni clic.

È necessario aggiornare il -406 in modo che corrisponda al proprio ID modulo. Se avete bisogno di assistenza per trovare il vostro ID modulo, consultate 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 avete bisogno di aiuto per aggiungere i CSS al vostro sito, date 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%); }
}

Ricordarsi di aggiornare il CSS di cui sopra in riferimento all'ID del modulo #wpforms-form-406 per farlo corrispondere all'ID del proprio modulo.

Ed ecco fatto! Avete aggiunto con successo gli effetti di animazione al vostro modulo multi-pagina. Volete aggiungere anche alcuni stili CSS al focus del campo del modulo? Date un'occhiata al nostro articolo su Come aggiungere i CSS al focus del campo del modulo.

Correlato

Riferimento azione: wpforms_wp_footer_end