ボタン矢印移動インタラクションの作成方法

この例では、同じクラスを持つすべてのボタンに対して、「矢印の移動」インタラクションをトリガーする方法を学びます。また、アニメーションがサイト訪問者が現在ホバーしているボタンの矢印にのみ影響を与えるようにする方法も学びます。

カスタムボタンの作成方法

まず、後でアニメーションを設定するためのテキストと矢印を含むカスタムボタンを作成します。ボタンで使用するために矢印画像をアセットパネルにアップロードする必要があります。カスタムボタンを作成するために以下の手順に従ってください：

1. Add panel > Basic に移動
2. link block をWebflowキャンバスにドラッグします
3. Style panel > Style selector に移動して、リンクブロックにクラスを設定します（例：「Button box」）
4. Add panel > Typography に移動
5. text block をリンクブロック内にドラッグします
6. Style panel > Style selector に移動して、テキストブロックにクラスを設定します（例：「Button text」）
7. Assets panel に移動
8. 矢印画像をリンクブロックにドラッグします
9. Style panel > Style selector に移動して、矢印画像にクラスを設定します（例：「Button arrow」）
10. リンクブロック（「Button box」）を選択します
11. Style panel > Layout に移動して、Display をFlexbox に設定します

これでボタンの作成は完了です！マージンやパディング、ボーダー、ホバー状態、その他のスタイルを追加できます。また、あなたのインタラクションがすべてのボタンに適用されることを後でテストするために、ボタンを複製することもできます。

プロのヒント： カスタムボタンの要素（リンクブロック、テキストブロック、矢印画像）にクラスを設定することで、同じクラスが適用された他の要素に対してもインタラクションを再利用できます。これは、カスタムボタンを再利用し、同じインタラクションが適用されるようにするために便利です。

カスタムボタンインタラクションの作成方法

それでは、ボタンの矢印がホバーした際に右に移動するようなインタラクションを作成しましょう。インタラクションを作成するには、次の手順を実行します：

1. カスタムボタンインタラクショントリガーの作成
2. ホバー時にボタンの矢印を移動させるアニメーションの作成
3. ホバーが外れたときに矢印の位置をリセットするアニメーションの作成
4. 同じクラスを持つすべての要素にトリガーを適用する
5. カスタムボタンのテスト

カスタムボタンインタラクショントリガーの作成

トリガーは、サイト訪問者がボタンとのインタラクションを開始する要素です。この場合、マウスホバーのトリガーを設定して、サイト訪問者がボタンの上にホバーするとアニメーション（つまり、矢印の移動）が発生するようにします。

1. リンクブロックを選択します（例：「Button box」）
2. Interactions panel に移動します
3. Element trigger の横にある「plus」アイコンをクリックします
4. 「Mouse hover」を選択します

ホバー時にボタンの矢印を移動させるアニメーションの作成

ここでは、ボタンの矢印にホバー時のアニメーションを設定して、サイト訪問者がボタンの上にホバーした際に矢印がわずかに右に移動するようにします。

1. Link box（「Button box」）を選択します
2. On hover セクションで、Action の横にある「Select an animation」をクリックします
3. 「Custom animation」の下で「Start an animation」を選択します
4. Timed animations の横にある「plus」アイコンをクリックします
5. アニメーションの名前を入力します（例：「Arrow move out」）
6. ボタンの矢印（「Button arrow」）を選択します
7. Actions の横にある「plus」アイコンをクリックします
8. Transform の下で Move を選択します
9. Move の下のx軸にピクセル値を設定します（例：6 px）
10. 必要に応じてeasing とduration を調整します
11. Class の横にある「Only children with this class」を選択します
12. Save をクリックします

注意：「Only children with this class」は、トリガー要素（「Button box」リンクブロック）とそのクラスが適用された子要素（「Button arrow」矢印）に関連して適用されます。アニメーションを「only children」に制限しない場合、カスタムボタンの1つにホバーすると、サイト内のすべての矢印が移動します。

トリガーをリンクブロックのクラス（Button box）に基づいて設定し、アニメーションを矢印のクラス（Button arrow）を持つ子要素にのみ影響するように設定したため、カスタムボタンのすべてのインスタンスに対してインタラクションが影響します。カスタムボタンには、「Button box」クラスと「Button arrow」クラスの両方が含まれている限りです。

アニメーションタイムラインには、「Arrow move out」というアニメーションが0.2秒の長さで「In Out Cubic」のイージングが適用されて表示されています。このアニメーションは、「Button arrow」という例のクラスに「Only children with this class」が適用されるように設定されています。

ホバー時に矢印の位置を元に戻すアニメーションの作成

次に、ボタンの矢印にホバーアウトのアニメーションを設定して、サイト訪問者がボタンからホバーアウトした際に矢印を元の位置に戻すようにします。

1. リンクブロックを選択します（例：「Button box」）
2. Interactions panel に移動します
3. Mouse hover 要素トリガーを選択します
4. On hover out セクションで、Action の横にある「Select an animation」をクリックします
5. 「Custom animation」の下で「Start an animation」を選択します
6. 以前に設定したアニメーション（例：「Arrow move out」）の横にある「three disclosure dots」アイコンをクリックします
7. Duplicate を選択します
8. 複製されたアニメーションの横にある「cog」アイコンをクリックします
9. アニメーションの名前を変更します（例：「Arrow move back」）
10. タイムライン上で矢印のMove アニメーションを選択します
11. x軸をMove の下で0pxに設定します
12. Save をクリックします

アニメーションタイムラインには、「Arrow move back」という名前のアニメーションが表示されており、0.2秒の期間で「In Out Cubic」のイージングが適用されています。このアニメーションは、「Button arrow」という例示されたクラスに対して「Only children with this class」が適用されるように設定されています。

同じクラスを持つすべての要素にトリガーを適用する

デフォルトでは、トリガーは選択された要素（つまり、リンクブロック）に適用されますが、これを変更して、同じクラスを持つすべての要素（例：「Button box」）にトリガーが適用されるようにする必要があります。これにより、サイト内でカスタムボタンを複製し、複製にも同じインタラクションが発生するようになります。

同じクラスを持つすべての要素にトリガーを適用するには：

1. リンクブロックを選択します（つまり、「Button box」）
2. Interactionsパネルに移動します
3. Mouse hover要素トリガーを選択します
4. Trigger settingsの下でClassを選択します

これで、そのクラス（つまり、「Button box」）を持つ各要素にインタラクションが適用されます。カスタムボタンをキャンバス上で複製すると、同じクラスが適用された複製ボタンも元のカスタムボタンと同じ矢印の移動インタラクションを持つようになります。

このインタラクションは、「Button box」という同じクラスを持つすべての要素でトリガーが設定されています。

カスタムボタンをテスト

さて、サイトをプレビューして、カスタムボタン（およびその複製）にホバーして、そのクラスが適用されたすべてのボタンでインタラクションが正しく動作するかどうかを確認できます。

スクロールインタラクションの作成方法

再利用可能なスクロールアニメーションを作成する際には、トリガー要素自体をターゲットにすると便利です。ここでは、サイトの見出しがスクロールして表示されると右にスライドし、不透明度が高くなるインタラクションの作成手順を説明します。

インタラクションを作成するには、以下の手順を実行します：

1. スクロールインタラクショントリガーの作成
2. スクロールインタラクションの作成
3. アクションのターゲットを設定する

スクロールインタラクショントリガーの作成

まず、インタラクションをセットアップするために、アニメーションを適用する親要素（つまり、divブロック）に「scrolls into view」トリガーを作成します。

1. divブロックを選択します - この例では、divブロックに「Content wrapper」というクラスを設定しています
2. Interactionsパネルに移動します
3. Element triggerの隣にある「plus」アイコンをクリックします
4. 「Scroll into view」を選択します

このインタラクションを同じクラスを持つ他の要素に再利用したい場合は、Trigger settingsの下でClassを選択できます。これにより、そのクラス（つまり、「Content wrapper」）が適用された要素がスクロールして表示されるたびにアニメーションが開始されます。

scroll into view animationのアニメーションを作成する

The scroll into viewインタラクションには2つのステップがあります：

• 初期状態（Initial state） — 要素の不透明度を0％に設定し、左に50px移動させます
• スクロールインビュー（Once scrolled into view ）state — 要素の不透明度を100％に設定し、x軸の原点に移動します

まず、divブロックの初期状態を作成し、表示される前に左に50px移動し、不透明度を0％に設定します：

1. divブロックを選択します（例：「Content wrapper」）
2. Interactionsパネルに移動します
3. Scroll into viewの要素トリガーを選択します
4. When scrolled into viewセクションのActionの隣にある「Select an animation」をクリックします
5. Custom animationの下で「Start an animation」を選択します
6. Timed animationsの隣にある「plus」アイコンをクリックします
7. アニメーションの名前を設定します（例：「Content wrapper animation」）
8. Actionsの隣にある「plus」アイコンをクリックします
9. Transformの下でMoveを選択します
10. x軸にピクセル値を設定します（例：-50 px）（Moveの下）
11. Timingの下で「Set as initial state」のチェックボックスを選択します
12. Actionsの隣にある「plus」アイコンをクリックします
13. Styleの下でOpacityを選択します
14. Opacityに値を設定します（例：0%）
15. Timingの下で「Set as initial state」のチェックボックスを選択します

次に、見出しがスクロールインビューになるときにアクションを設定します：

1. Actionsの隣にある「plus」アイコンをクリックします
2. Transformの下でMoveを選択します
3. x軸にピクセル値を設定します（例：0 px）（Moveの下）
4. Timingの下で「Set as initial state」のチェックボックスを解除します
5. アニメーションタイムラインのアクションの隣にある「plus」アイコンをクリックします（つまり、「Content wrapper」の0px Moveアクション） - これにより、見出しがx軸の0pxに戻るときにアクションが同時に発生することが確認されます
6. Styleの下でOpacityを選択します
7. Opacityにパーセンテージの値を設定します（例：100%）
8. Saveをクリックします

アニメーションタイムラインには、「Content wrapper animation」という名前のアニメーションが2つの「Section heading Move」アクションと2つの「Section heading Opacity」アクションが表示されています。

次に、アニメーションがアニメーションのトリガー要素（つまり、「Content wrapper」divブロック）にのみ影響することを確認します。

アクションのターゲットを設定する

アクションがインタラクションのトリガーに影響するようにターゲットを設定するには：

1. divブロックを選択します（例：「Content wrapper」）
2. Interactionsパネルに移動します
3. Scroll into viewの要素トリガーを選択します
4. 以前に設定したアニメーション（つまり、「Content wrapper animation」）の隣にある「cog」をクリックします
5. アニメーションタイムラインのすべてのアクションを選択します（Commandキー（Macの場合）またはControlキー（Windowsの場合）を押しながら、すべてのタイムラインアクションをクリックします）
6. Affectドロップダウンメニューで「Interaction trigger」を選択します
7. Saveをクリックします

これにより、アクションが特定の要素に影響を与えるのではなく、アニメーションのトリガー要素にのみ影響を与えることが確認されます。これにより、アニメーションを再利用し、アニメーションが以前のターゲット要素を新しいインタラクションのトリガー要素で置き換えることができます。

アニメーションタイムラインは、すべてのアクションが選択された「コontent wrapper animation」を表示します。Affect "ドロップダウンは、"Interaction trigger "に設定されています。