改ページのトランジションにアニメーション効果を追加する方法

はじめに

フォーム内の改ページにアニメーション効果を追加したいですか?デフォルトでは、複数ページのフォームでページ間を移動するときにアニメーションはありません。しかし、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 );

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

自分のフォームIDに合わせて-406を更新する必要があります。自分のフォーム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%); }
}

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

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

関連

アクション・リファレンス:wpforms_wp_footer_end