Comment ajouter des effets d'animation aux transitions de saut de page ?

Introduction

Souhaitez-vous ajouter des effets d'animation à vos sauts de page à l'intérieur de vos formulaires ? Par défaut, il n'y a pas d'animation lorsque vous passez d'une page à l'autre dans un formulaire multi-pages. Toutefois, en utilisant JavaScript et un peu de CSS, vous pouvez ajouter une petite animation lorsque vous passez de la page suivante à la page précédente et vice-versa.

Création du formulaire

Tout d'abord, vous devez créer votre formulaire multi-pages. Si vous avez besoin d'aide pour créer ce type de formulaire, veuillez consulter cette documentation.

Ajout de l'extrait JavaScript

Il est maintenant temps d'ajouter le snippet.

Si vous avez besoin d'aide pour savoir comment et où ajouter des snippets à votre site, veuillez consulter ce tutoriel.

/**
 * 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 );

Ce snippet ne sera exécuté que sur le formulaire ID 406, lorsque le bouton Page suivante ou Page précédente est cliqué, le script ajoutera un nom de classe CSS de anim-trans au conteneur du formulaire qui permettra aux transitions CSS de se produire. Après 2 secondes ou 2000 millisecondes, le nom de classe est supprimé afin que l'animation se produise à chaque clic.

Vous devrez mettre à jour le -406 pour qu'il corresponde à votre propre identifiant de formulaire. Si vous avez besoin d'aide pour trouver votre numéro de formulaire, veuillez consulter ce tutoriel.

Ajout des effets d'animation

Maintenant que le script a été ajouté pour ajouter la classe CSS, nous pouvons ajouter le CSS qui créera l'animation.

Si vous avez besoin d'aide pour ajouter des feuilles de style CSS à votre site, veuillez consulter ce tutoriel.

.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%); }
}

N'oubliez pas de mettre à jour le CSS ci-dessus en référence à l'ID du formulaire #wpforms-form-406 pour qu'il corresponde à l'ID de votre propre formulaire.

Et le tour est joué ! Vous avez réussi à ajouter des effets d'animation à votre formulaire multi-pages. Souhaitez-vous également ajouter un style CSS au champ de focalisation du formulaire ? Jetez un coup d'œil à notre article sur la façon d'ajouter du CSS à la focalisation du champ de formulaire.

En rapport

Référence de l'action : wpforms_wp_footer_end