ページ区切り遷移にアニメーション効果を追加する方法

はじめに

フォームのページ区切りにアニメーション効果を追加しますか？デフォルトでは、マルチページフォームでページからページへ移動する際にアニメーションは発生しません。しかし、JavaScriptとCSSを使用すると、次のページから前のページへ、またはその逆に移動する際に簡単なアニメーションを追加できます。

フォームの作成

まず、マルチページフォームを作成する必要があります。このタイプのフォームの作成方法については、こちらのドキュメントをご覧ください。

JavaScriptスニペットの追加

次にスニペットを追加します。

スニペットをサイトに追加する方法と場所についてサポートが必要な場合は、このチュートリアルをご覧ください。

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

このスニペットは、フォームID 406でのみ実行されます。次へまたは前へボタンがクリックされると、スクリプトはフォームコンテナにanim-transというCSSクラス名を追加し、CSSトランジションを発生させます。2秒または2000ミリ秒後にクラス名が削除されるため、クリックごとにアニメーションが発生します。

-406を自分のフォームIDに合わせて更新する必要があります。フォームIDの見つけ方がわからない場合は、こちらのチュートリアルをご覧ください。

アニメーション効果の追加

CSSクラスを追加するスクリプトが追加されたので、アニメーションを作成するCSSを追加できます。

サイトにCSSを追加する方法については、こちらのチュートリアルをご覧ください。

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

上記のCSSのフォームID #wpforms-form-406を、ご自身のフォームIDに合わせて更新することを忘れないでください。

これで完了です！マルチページフォームにアニメーション効果を正常に追加できました。フォームフィールドのフォーカスにCSSスタイルを追加することもできますか？フォームフィールドのフォーカスにCSSを追加する方法の記事をご覧ください。

関連

アクション参照: wpforms_wp_footer_end