マウスを要素の上に置いたときの位置に基づいて、回転するカードの動きをアニメーション化します。マウスの位置を基準にした回転を設定が可能です。
このレッスンでは
- 遠近法を設定する
- トリガーを設定する
- 回転をアニメーション化する
- 静止状態を設定する
- スペキュラハイライトを作成する
について説明しています。
1.遠近感を設定する
- 動きを入れる子要素の親要素が選択されていることを確認します。
- スタイルパネルの「トランジションとトランスフォーム」で、「子供の遠近法」を1000ピクセルに変更します。
2.トリガーを設定する
トリガーとして動作させたい要素(例：カード)を選択します。
インタラクションパネルで、「選択された要素に」の横のプラス記号をクリックし、ドロップダウンメニューから「マウスを要素の上に移動」を選択します。
3.回転をアニメーション化する
- インタラクションパネル > マウスの動きで > アクション > マウスアニメーションを再生 をクリックします。
- マウスアニメーション]の横にあるプラス記号をクリックします。
- 名前を付ける（例：Rotate on Mouseover)
- Mouse X actions timelineの0%でプラス記号をクリックし、Rotateを選択します。
- [回転]で、Y軸を-5度に変更します。
- 100%でCard要素をクリックし、[回転]でY軸を5°に変更します。
- マウスYアクションの下に、回転アクションを追加します。
- 0%の位置で「回転」の下にあるX軸を5度に変更します。
- [回転]の下に100％で、X軸を-5°に変更します。
- アニメーションを終了して、スムージングを調整します。
4.静止状態を設定する
- InteractionsパネルのOn mouse moveで、Mouse X positionを50%に設定する。
- マウスのY位置を50%に設定する
5.スペキュラハイライトを作成する
- 新しいDivブロックを、作業中の要素（Card）の内側のcanvasにドラッグします。
- クラスを作成し、名前を付けます（例：Card-highlight）。
- 幅と高さを設定します（例：400ピクセルに設定）。
- 位置を絶対座標に設定します。
- 左上から配置する
- 背景色を設定します（例：白）。
- [ボーダー」の「半径」を50%に変更します。
- [効果]の[不透明度]を10%に変更します。
- [ぼかし]フィルターを追加し、[半径]を50ピクセルに変更します
- インタラクションパネルで、「マウスオーバーで回転」をクリックします。
- 「Mouse X」タイムラインの「0%」に「Move」アニメーションを追加し、そのX軸を「100%」に変更します。
- 「Mouse X」タイムラインの100%の位置で、「Move」アニメーションを追加し、そのX軸を-50%に変更します。
- Mouse Y タイムライン 0%で、Move アニメーションを追加し、その Y 軸を 50% に変更します。
- マウスYのタイムラインを100%にして、Moveアニメーションを追加し、そのY軸を-50%に変更します。
- プレビューモードで作品を確認します。