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

Introduction

Souhaitez-vous ajouter des effets d'animation à vos sauts de page dans vos formulaires ? Par défaut, il n'y a pas d'animation lorsque vous passez d'une page à une autre dans un formulaire multipage. Cependant, 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 de votre formulaire

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

Ajout du snippet JavaScript

Il est maintenant temps d'ajouter le snippet.

Si vous avez besoin d'aide sur comment et où ajouter des extraits de code à 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 s'exécutera que sur le formulaire ID 406. Lorsque le bouton de page Suivant ou Précédent est cliqué, le script ajoutera une classe CSS nommée anim-trans au conteneur du formulaire, ce qui permettra aux transitions CSS de se produire. Après 2 secondes ou 2000 millisecondes, la classe est supprimée afin que l'animation se produise à chaque clic.

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

Ajout des effets d'animation

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

Si vous avez besoin d'aide pour ajouter du 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 à votre propre ID de formulaire.

Et voilà ! Vous avez ajouté avec succès des effets d'animation à votre formulaire multipage. Souhaitez-vous également ajouter un style CSS au focus des champs du formulaire ? Consultez notre article sur Comment ajouter du CSS au focus des champs du formulaire.

Articles associés

Référence d’action : wpforms_wp_footer_end