TypeScriptを使用したNext.jsアプリケーション開発【ただの備忘録】
サイトの見た目と使用感を大幅に向上させるには、アニメーションの実装は不可欠。
以下のどちらかを使う(この方法しか今のところ知らない)と滑らかなアニメーションが作れるらしい。
1.外部ライブラリを使用したアニメーション手法
Framer Motionを使用した滑らかなアニメーション
2.外部ライブラリに依存しないアニメーション手法
CSS Transitions/Animations
- 軽量で高パフォーマンス
- シンプルなアニメーションに最適
- ブラウザの最適化が効く
Intersection Observer API
- ネイティブのJavaScript API
- スクロールベースのアニメーションに最適
- パフォーマンスへの影響が少ない
- 要素の可視性検知が容易
いろんなアニメーションがあるらしい(一部)
1.ホバーアニメーション
2.ページ遷移アニメーション
3.パララックス効果
4.スクロールプログレスバー
5.フェードインとスライドイン効果
6.モバイルメニューのスムーズな開閉