リサイクル活動

サイトの別のセクションで以前に生成したアクティビティを使用する機能があります。これは、同じアクティビティを使用したい、繰り返しのレイアウトや同一構造のコンポーネントを扱う場合に役立ちます。

Webflow のアクティビティには、アクティビティの再利用を支援するための 2 つの主要なコントロールがあります。

1. トリガー構成—この時点で、トリガーが特定の要素（選択した要素）のみに関係するか、同じ分類のすべての要素に関係するかを選択できます。
2. 行動目標 — この場合、アニメーションのアクションが特定の要素、要素のグループ、またはインタラクショントリガー自体に影響を与えるかどうかを判断できます。

重要： 現時点では、ページ アクションをリサイクルすることはできません。各ページにページ トリガーを割り当てる必要があります。ただし、アニメーションを要素のカテゴリに割り当てて、各ページでリサイクルすることができます。これを行うには、最初のページでページ トリガーを設定し、アニメーションを作成します。選択した要素ではなくカテゴリをターゲットにしていることを確認してください。次に、各ページに移動し、ページ トリガーを設定して、以前に作成したアニメーションを指定します。

このチュートリアルでは、再利用可能な 2 つのアニメーションについて説明します。 

1. ボタン矢印シフトアクティビティを作成する方法
2. ビューアクティビティ内でスクロールを作成する方法

ボタン矢印シフトアクティビティを開発する方法

この例では、同じカテゴリのすべてのボタンで同じ「矢印が外へ移動」する動作を開始する方法を学びます。また、訪問者が現在マウスをホバーしているボタンの矢印にのみアニメーションが影響するようにする方法も学びます。

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

まず、テキストと矢印（後でアニメーションを適用する対象）を組み込んだカスタム ボタンを作成します。ボタンで使用する矢印画像をアセット パネルにアップロードする必要があります。カスタム ボタンの形状を設定するには、次の手順を実行します。

1. に行く 挿入パネル > 基本
2. ドロップする リンクブロック Webflowキャンバスに
3. 案内する スタイルパネル > スタイルセレクター リンクブロックに分類を割り当てます（例：「ボタンボックス」）
4. へ移動 挿入パネル > タイポグラフィ
5. 追加 テキストブロック リンクブロック内
6. 進む スタイルパネル > スタイルセレクター テキストブロックに分類を割り当てます（例：「ボタンテキスト」）
7. アクセス アセットパネル
8. 矢印画像をリンクブロックにドラッグします
9. 案内する スタイルパネル > スタイルセレクター 矢印画像に分類を割り当てます（例：「ボタン矢印」）
10. リンクブロック（「ボタンボックス」）を選択します。
11. に行く スタイルパネル > レイアウト そして設定 画面 に フレックスボックス

これでボタンのデザインが完了しました。余白とパディング、境界線、ホバー状態、その他のスタイルを含めることができます。また、後続のテスト用にボタンを複製し、アクティビティがすべてのボタンに適用されていることを確認することもできます。

専門家の助言： カスタム ボタンのコンポーネント (リンク ブロック、テキスト ブロック、矢印画像など) に分類を割り当てると、同じ分類を持つ他の要素でアクティビティを再利用できます。これは、たとえば、カスタム ボタンをリサイクルして同じアクティビティを採用する場合に役立ちます。

カスタムボタンアクティビティの開発方法

これで、ボタン矢印シフト アクティビティを設定できるようになりました。これにより、サイト訪問者がボタンの上にマウスを移動したときに矢印が右に移動します。アクティビティを構築するには、次の操作を行います。 

1. カスタムボタンアクティビティトリガーを作成する
2. ボタンの矢印をホバー時に移動するアニメーションを設定します
3. ホバーアウト時に矢印の位置をリセットするアニメーションを設定します
4. 同じ分類のすべての要素にトリガーを適用する
5. カスタムボタンを評価する

カスタムボタンアクティビティトリガーを作成する

トリガーは、サイト訪問者がボタンを操作したときにアニメーションを開始するものです。このシナリオでは、マウス ホバー トリガーを設定するので、サイト訪問者がボタンの上にマウスを移動すると、アニメーション (矢印の動きなど) が発生します。

1. リンクブロック（例：「ボタンボックス」）を選択します。
2. アクセス アクティビティパネル
3. 「プラス”アイコンの隣に 要素トリガー
4. 「マウスホバー」を選択

ボタンの矢印をホバー時に移動するアニメーションを設定します

この手順では、サイト訪問者がボタンの上にマウスを置いたときにボタンの矢印がわずかに右に移動するように、ボタンの矢印にホバー アニメーションを配置します。

1. リンクボックス（「ボタンボックス」など）を選択します。
2. 「アニメーションを選択」をタップします アクション の中に ホバー時 セクション
3. 「アニメーションを開始する」を選択します カスタムアニメーション
4. 「プラス”アイコンの横にある 時間指定アニメーション
5. アニメーションの名前を指定します（例：「矢印が外に出る」）
6. ボタンの矢印（つまり「ボタンの矢印」）を選択します。
7. 「プラス" の隣に 行動
8. 選ぶ 動く 下 変身
9. x軸のピクセル値（例：6ピクセル）を設定します。 動く
10. 必要に応じてイージングと継続時間を調整します
11. 「この分類の子供のみ」を選択します クラス
12. タップ 保存

重要： 「この分類の子のみ」は、トリガー要素 (つまり、「ボタン ボックス」リンク ブロック) と、その分類が適用されたその子 (つまり、「ボタン矢印」矢印) を参照して適用されます。アニメーションを「子のみ」に影響を与えるように制限しないと、サイト訪問者がカスタム ボタンの 1 つにマウスを移動したときに、サイト上の矢印のすべてのインスタンスが移動します。

リンク ブロックの分類 (つまり、「ボタン ボックス」) に基づいてトリガーを設定し、アニメーションを矢印の分類 (つまり、「ボタン矢印」) の子にのみ影響するように設定した場合、カスタム ボタンが「ボタン ボックス」分類と「ボタン矢印」分類の両方を包含している限り、アクティビティはサイト上のカスタム ボタンのすべてのインスタンスに影響します。

ホバーアウト時に矢印の位置をリセットするアニメーションを設定します

ここで、ホバーを設定しましょう。ボタンのホバーアウト遷移中に、サイト訪問者がボタンからカーソルを離したときに矢印が元の位置に戻るように、矢印にアニメーションを実装します。

1. リンクブロックを選択します（例：「ボタンボックス」）
2. に移動 インタラクションパネル
3. トリガー要素を選択する マウスホバー
4. 「アニメーションを選択」をクリックします。 アクション の中に ホバーアウト時 セクション
5. 「アニメーションを開始する」を選択します カスタムアニメーション
6. 「3つの開示ドット既存のアニメーションに近い「矢印が外に出る」
7. 選ぶ 重複
8. を選択 "歯車複製されたアニメーションの近くにある「」アイコン
9. アルター アニメーションの名前（例：「矢印を後ろに移動」）
10. タイムライン上の矢印の移動アニメーションを選択します
11. x軸を0px以下に調整します 動く
12. クリック 保存

同じクラスを共有するすべての要素にトリガーを拡張する

デフォルトでは、トリガーは選択された要素 (リンク ブロックなど) にのみ適用されますが、普遍的な効果を得るには、トリガーを変更して同じクラス (「ボタン ボックス」など) のすべての要素をカバーし、そのクラスのすべてのインスタンスでインタラクションが均一に発生するようにします。このアプローチにより、Web サイト全体でカスタム ボタンを複製できるため、これらの複製でも均一なインタラクションが保証されます。

トリガーを同じクラスのすべての要素に拡張するには:

1. リンクブロック（「ボタンボックス」）を選択します。
2. アクセス インタラクションパネル
3. 選択する マウスホバー 要素トリガー
4. 選ぶ クラス で トリガー設定

これで、インタラクションはそのクラスを共有するすべての要素 (つまり、「ボタン ボックス」) を網羅するようになります。キャンバス上でカスタム ボタンを複製すると、同じクラスを継承する複製ボタンは、元のカスタム ボタンと同じ矢印移動インタラクションを示します。

カスタマイズしたボタンをテストする

カスタマイズしたボタンや重複したボタンの上にマウスを移動してサイトの機能を検証し、そのクラスを継承するすべてのボタンにインタラクションがシームレスに適用されることを確認します。

スクロールアクティベーションインタラクションの作成

再利用可能なスクロール効果を確立する際には、トリガー要素自体をターゲットにすると便利です。ここでは、スクロールして表示されると、Web サイトの見出しが右にスライドして不透明度が増すインタラクションを作成する方法を説明します。

このインタラクションを開発するには、次のことを行います。

1. スクロールインビュートリガーを確立する
2. スクロールして表示するアニメーションを作成する
3. アクションターゲットを指定する

スクロールインビュートリガーを確立する

インタラクションを開始するには、まず、アニメーションの対象となる親要素 (div ブロックなど) に「スクロールして表示」トリガーを設定します。

1. divブロックを選択します。たとえば、divブロックに「コンテンツラッパー」クラスを割り当てます。
2. に移動 インタラクションパネル
3. クリックしてください "プラス”アイコンの横に 要素トリガー
4. 「スクロールして表示」を選択する

同じクラスの要素間でこのインタラクションを再利用するには、クラスレベルでトリガーを適用します。 クラス 下 トリガー設定 そのクラス (例: 「コンテンツ ラッパー」) の要素がスクロールして表示されるたびにアニメーションがアクティブになるようにします。

スクロールして表示するアニメーションを作成する

スクロールして表示するアニメーションには、次の 2 つの段階があります。

• 初期状態 — 要素を50ピクセル左に配置し、不透明度を0%に設定します。
• スクロールして表示 状態 — 要素を100%の不透明度に遷移させ、X軸の原点に戻す

まず、div ブロックの初期状態を定義し、スクロールして表示される前に、50 ピクセル左に配置し、不透明度を 0% に設定します。

1. divブロックを選択します（例：「コンテンツラッパー」）
2. アクセス インタラクションパネル
3. 選ぶ スクロールして表示 要素トリガー
4. 「アニメーションを選択」をクリックします。 アクション の中に スクロールして表示される セクション
5. 「アニメーションを開始する」を選択します カスタムアニメーション
6. を選択 "プラス”アイコンの近くにある 時間指定アニメーション
7. アニメーションに名前を割り当てます（例：「コンテンツラッパーアニメーション」）
8. クリックしてください "プラス”アイコンの近くにある 行動
9. 選ぶ 動く 下 変身
10. x軸の値（例：-50px）を指定します。 動く
11. 「初期状態として設定」にチェックを入れてください。 タイミング
12. クリックしてください "プラス”アイコンの近くにある 行動
13. 選択する 不透明度 下 スタイル
14. をセットする 不透明度 値（例：0%）
15. 「初期状態として設定」にチェックを入れてください。 タイミング

次に、見出しがスクロールして表示されたときのアクションを定義します。

1. クリックしてください "プラス”アイコンの近くにある 行動
2. 選ぶ 動く 下 変身
3. x軸の値（例：0px）を指定します。 動く
4. 「初期状態として設定」のチェックを外す checkbox タイミング
5. クリックしてください "プラス指定したアクションの横にあるタイムライン上の「コンテンツラッパー」アイコンをクリックします（例：0px 動く アクション) — これにより、見出しが x 軸の 0 px に戻ると同時にアクションが実行されるようになります。
6. 選ぶ 不透明度 内で スタイル
7. パーセンテージ値を指定する 不透明度 (例: 100%)
8. プレス 保存

ここで、アニメーションがそれをトリガーする要素（「コンテンツ ラッパー」div ブロックなど）にのみ影響を与えることを確認する必要があります。

行動目標を設定する

アクションがインタラクション トリガーに影響を与えるようにアクション ターゲットを構成するには、次の手順を実行します。

1. divブロックを選択します（例：「コンテンツラッパー」）
2. 案内する インタラクションパネル
3. 選ぶ スクロールして表示 要素トリガー
4. 「歯車” を、以前に設定したアニメーションの横に表示します（例: “コンテンツラッパーアニメーション”）
5. アニメーションタイムライン内のすべてのアクションを選択します（ 指示 (Macの場合) または コントロール （Windowsの場合）すべてのタイムラインアクションをクリックします）
6. 「インタラクショントリガー」を選択します 影響する 落ちる
7. 打つ 保存

こうすることで、アクションは、アニメーションの作成時に最初に選択した特定の要素ではなく、インタラクション トリガーのみに影響します。このアプローチにより、アニメーションの再利用が可能になり、アクションの以前のターゲット要素が新しいインタラクションのトリガー要素に置き換えられます。