この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。
引用元ホバー時に要素を表示するためのホバーインタラクションを使用します。
ホバーインアニメーションの構築
- トリガーとするリンクブロックを選択します
- インタラクションパネルで、エレメントトリガーの横にあるプラス記号をクリックし、「Mouse Hover 」をドロップダウンメニューから選択します
- ホバー時には、アクションメニューから「Start an Animation」を選択します
- Time Animations の横にあるプラス記号をクリックし、名前を付けます（例: フライイン）
- アニメーションを適用したい要素を選択します（例: ハート要素）
- Timed Actionsの横にあるプラス記号をクリックし、ドロップダウンメニューから「移動」を選択します
- 「Move」の下で、x軸に値を設定します（例: -100）
- タイミングの横にあるスイッチを「initial state」に切り替えます
- 他のアニメーションを適用したい要素に対しても、ステップ6から9を繰り返します
- インタラクションパネルで、タイムライン内の要素を選択（Shiftキーを押しながら）
- 右クリックして複製します
- 「Move」の下で、x軸を元の位置（0ピクセル）に変更します
- Timingの下で、Easing（例: Easing）を変更します
- Durationを短縮します（例: 0.2秒）
ホバーアウトアニメーションの構築
- 作成したアニメーションを閉じます
- インタラクションパネルで、ホバーアウト時に、「Action」メニューから「Start an Animation」を選択します
- タイムアニメーションの下で、Fly inの横にある歯車アイコンをクリックし、「Duplicate」を選択します
- Fly in 2をアクティブにします
- 名前を変更します（例: 豪華にフライアウト）
- タイムラインからアニメーションを削除します（例: ハートとH3の価格）
- タイムライン内の残りのアニメーションを選択します
- タイミングの横にある「Set as initial state」のスイッチをオフに切り替えます
- EasingとDurationを調整します（前と同様）
他の要素へのアニメーションの適用
- タイムライン内のどれかの Timed Actionsを選択します
- Affectの横にある選択をクリックし、クラスを選択します
- All elements with this class を選択し、Only children with this classを選択します
- ホバーインとホバーアウトの両方に対して、1から3を繰り返します
目次
トップへ