AI要約
フォームの確認メッセージをより魅力的にしませんか？紙吹雪のアニメーションを追加することで、ユーザーがフォームを正常に送信したときに、エキサイティングで記憶に残る体験を作り出すことができます。
このガイドでは、確認メッセージに紙吹雪と花火のアニメーションを実装する方法を説明します。
フォームの設定
まず、フォームを作成する必要があります。このチュートリアルの目的では、名前、メールアドレス、および段落テキストのフォームフィールドを持つシンプルな連絡フォームを追加します。
フィールドを追加したら、設定タブをクリックし、次に確認をクリックします。確認メッセージウィンドウ内で、<canvas id="animateCanvas" />を追加するだけです。
このキャンバス要素とIDを追加すると、紙吹雪が表示される場所を制御できます。確認メッセージにのみ表示したいので、コードスニペットで具体的にターゲットにできる要素を追加しています。
キャンバスのスタイルの追加
アニメーションを適切に配置するために、このCSSをサイトに追加してください。カスタムCSSの追加方法がわからない場合は、WordPressにCSSを追加する方法に関するガイドを確認してください。
canvas#animateCanvas {
position: fixed;
top: 0;
left: 0;
z-index: 1000; /* ensure canvas is above other content */
pointer-events: none; /* allow clicks to pass through the canvas */
}
紙吹雪アニメーションの追加
いよいよ、魔法を起こすコードスニペットを追加します。カスタムコードの追加方法がわからない場合は、WordPressにコードスニペットを追加する方法に関するガイドを確認してください。
アニメーションのカスタマイズ
コード内のこれらの値を変更して、アニメーションをカスタマイズできます：
- SPRITE_WIDTH：紙吹雪のピースの幅
- SPRITE_HEIGHT：紙吹雪のピースの高さ
- PAPER_LENGTH：紙吹雪の量
- ROTATION_RATE：回転速度
- COLORS：紙吹雪の色の配列
- DURATION：アニメーションの期間（ミリ秒単位）
- LENGTH：紙吹雪の総量
代替：花火アニメーション
代わりに花火の効果を得るには、紙吹雪のコードを花火アニメーションのコードに置き換えてください（ドキュメントの上の完全なコードを参照）。セットアッププロセスは同じです。
これで完了です！確認メッセージに紙吹雪アニメーションを正常に追加しました。代わりに雪を追加しませんか？確認メッセージに雪の降るアニメーションを追加する方法のチュートリアルをご覧ください。