料金プランを有効化して学習を始めましょう。

マウスホバー時に回転

要素の上にマウスを置くと、その位置に応じて回転するカードの動きをアニメートします。

この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。

引用元

マウスの位置に基づいて回転を設定します。

このレッスンで学ぶこと

遠近感を設定する

  1. アニメーションを行う子要素の親要素が選択されていることを確認します
  2. スタイルパネルのTransitions & transformsセクションで、子要素の透視を1000ピクセルに変更します

トリガーを設定する

  1. Select the element you’d like to act as the trigger (e.g., Card)
  2. In the Interactions panel, click the plus sign next to On Selected Element and choose Mouse move over element from the dropdown menu
  3. トリガーとして機能する要素を選択します（例: カード）
  4. インタラクションパネルで、選択された要素での隣にあるプラス記号をクリックし、ドロップダウンメニューからMouse move over elementを選択します

回転のアニメーションを設定する

  1. Interactions panel > On mouse move > Action > Play mouse animation をクリックします
  2. マウスアニメーションの隣にあるプラス記号をクリックします
  3. 名前を付けます（例: マウスオーバーで回転）
  4. マウスXアクションタイムラインの0%にプラス記号をクリックし、**回転（Rotate）**を選択します
  5. 回転の下で、y軸を-5度に変更します
  6. 100%でカード要素を選択し、回転（Rotate）の下でy軸を5度に変更します
  7. マウスYアクションに回転（Rotate）アクションを追加します
  8. 0%で回転の下で、x軸を5度に変更します
  9. 100%で回転の下で、x軸を-5度に変更します
  10. アニメーションを閉じて、スムージングを調整します

休止状態を設定する

  1. インタラクションパネルのマウス移動時の下で、マウスX位置を50%に設定します
  2. マウスY位置を50%に設定します

鏡面ハイライトを作成する

  1. 作業中の要素（カード）内に新しいDivブロックをキャンバスにドラッグします
  2. クラスを作成し、名前を付けます（例: カードハイライト）
  3. 幅と高さを設定します（例: 400ピクセル）
  4. Positionをabsoluteに設定します
  5. 左上からの位置に設定します
  6. Background colorを設定します（例: 白）
  7. Borderの下でRadiusを50%に変更します
  8. Effectsの下でOpacity10%に変更します
  9. Blurフィルターを追加し、Radiusを50ピクセルに変更します
  10. Interactions panelで、Rotate on mouseoverをクリックします
  11. Mouse X timelineの0%にMove アニメーションを追加し、x軸を100%に変更します
  12. Mouse X timelineの100%で、Move アニメーションを追加し、x軸を-50%に変更します
  13. Mouse Y timeline の0%にMove アニメーションを追加し、y軸を50%に変更します
  14. Mouse Y timelineの100%で、Move アニメーションを追加し、y軸を-50%に変更します

プレビューモードで作業を確認してください。