#47|マウスオーバーで回転させる

ホバー(マウスオーバー)時に回転するアニメーションを作成します。

目次

マウスを要素の上に置いたときの位置に基づいて、回転するカードの動きをアニメーション化します。マウスの位置を基準にした回転を設定が可能です。


このレッスンでは

  1. 遠近法を設定する
  2. トリガーを設定する
  3. 回転をアニメーション化する
  4. 静止状態を設定する
  5. スペキュラハイライトを作成する

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

1.遠近感を設定する

  1. 動きを入れる子要素の親要素が選択されていることを確認します。
  2. スタイルパネルの「トランジションとトランスフォーム」で、「子供の遠近法」を1000ピクセルに変更します。

2.トリガーを設定する

トリガーとして動作させたい要素(例:カード)を選択します。

インタラクションパネルで、「選択された要素に」の横のプラス記号をクリックし、ドロップダウンメニューから「マウスを要素の上に移動」を選択します。


3.回転をアニメーション化する

  1. インタラクションパネル > マウスの動きで > アクション > マウスアニメーションを再生 をクリックします。
  2. マウスアニメーション]の横にあるプラス記号をクリックします。
  3. 名前を付ける(例:Rotate on Mouseover)
  4. Mouse X actions timelineの0%でプラス記号をクリックし、Rotateを選択します。
  5. [回転]で、Y軸を-5度に変更します。
  6. 100%でCard要素をクリックし、[回転]でY軸を5°に変更します。
  7. マウスYアクションの下に、回転アクションを追加します。
  8. 0%の位置で「回転」の下にあるX軸を5度に変更します。
  9. [回転]の下に100%で、X軸を-5°に変更します。
  10. アニメーションを終了して、スムージングを調整します。

4.静止状態を設定する

  1. InteractionsパネルのOn mouse moveで、Mouse X positionを50%に設定する。
  2. マウスのY位置を50%に設定する

5.スペキュラハイライトを作成する

  1. 新しいDivブロックを、作業中の要素(Card)の内側のcanvasにドラッグします。
  2. クラスを作成し、名前を付けます(例:Card-highlight)。
  3. 幅と高さを設定します(例:400ピクセルに設定)。
  4. 位置を絶対座標に設定します。
  5. 左上から配置する
  6. 背景色を設定します(例:白)。
  7. [ボーダー」の「半径」を50%に変更します。
  8. [効果]の[不透明度]を10%に変更します。
  9. [ぼかし]フィルターを追加し、[半径]を50ピクセルに変更します
  10. インタラクションパネルで、「マウスオーバーで回転」をクリックします。
  11. 「Mouse X」タイムラインの「0%」に「Move」アニメーションを追加し、そのX軸を「100%」に変更します。
  12. 「Mouse X」タイムラインの100%の位置で、「Move」アニメーションを追加し、そのX軸を-50%に変更します。
  13. Mouse Y タイムライン 0%で、Move アニメーションを追加し、その Y 軸を 50% に変更します。
  14. マウスYのタイムラインを100%にして、Moveアニメーションを追加し、そのY軸を-50%に変更します。
  15. プレビューモードで作品を確認します。