#51|カーソルを合わせた時に要素を表示させる

親要素にカーソルを合わせたときに子要素を表示するホバーインタラクションを使用します。

目次

ホバーインタラクションを使って、ホバー時に要素を表示させます。

このレッスンでは

  1. ホバーインするアニメーションを作成する
  2. ホバーアウトするアニメーションを作成する
  3. アニメーションを他の要素に適用する

について説明しています。

1. ホバーするためのアニメーションを作成する

  1. リンクブロックを選択する(トリガーにするため)。
  2. Interactionsパネルで、Element Triggerの隣にあるプラス記号をクリックし、ドロップダウンメニューからMouse Hoverを選択する。
  3. 「オンホバー」で、「アクション」メニューから「アニメーションを開始」を選択します。
  4. [Time Animations]の横にあるプラス記号をクリックします。
  5. 名前を付けます(例:Fly in)。
  6. アニメートする要素を選択します(例:ハート要素)。
  7. 時間指定アクションの横のプラス記号をクリックし、ドロップダウンメニューから「移動」を選択します。
  8. 「移動」で、X 軸に値を指定します (例: -100)
  9. 「タイミング」の横のスイッチを「初期状態として設定」に切り替えます。
  10. アニメートさせたい他の要素についても、手順6〜9を繰り返す
  11. インタラクションパネルで、(シフトを押しながら)タイムライン上の要素を選択します。
  12. 右クリックで複製
  13. 「移動」で、X軸を原点(0ピクセル)に戻します。
  14. 「タイミング」で、「イージング」を変更します(「イージングアウト」など)。
  15. 継続時間を短くする (例: 0.2 秒)

2. ホバーアウトするアニメーションを作成する

  1. 作成したアニメーションの外をクリックする
  2. InteractionsパネルのOn Hover Outで、ActionメニューからStart an Animationを選択します。
  3. タイムド・アニメーション]の[フライ・イン]の横の歯車のアイコンをクリックし、[複製]を選択します。
  4. Fly in 2を起動します。
  5. 名前を変更します(例:Fly out fabulously)。
  6. タイムラインから重複するアニメーション(例:ハートとH3プライス)を削除します。
  7. タイムラインの残りのアニメーションを選択します。
  8. [タイミング]の横にある[初期状態として設定]をオフにします。
  9. イージングとデュレーションの調整

3. アニメーションを他の要素に適用する

  1. タイムラインのタイムド・アクションのいずれかを選択します。
  2. [効果]の横にある[クラス]を選択します。
  3. このクラスを持つすべての要素]をクリックし、[このクラスを持つ子要素のみ]を選択します。
  4. ホバーインとホバーアウトの両方で1〜3を繰り返す