知ってた？ナルホド！
こんにちは！コーダーの平原です！
現代のWebサイトでは、ユーザーに視線誘導を促したり、デザインのポイントとして、
様々なアニメーションが使われています。
アニメーションの実装はJavaScript、JQuery、CSSなど色々な方法がありますが、
今回は、簡単に滑らかなアニメーションを実装することができる「anime.js」ライブラリをご紹介します。
1. anime.jsとは
anime.jsは、JavaScriptのアニメーションライブラリです。
CSSやSVGなどを操作することもでき、様々なイージングを使用できます。ファイルサイズが18KBくらいと、軽量なのも嬉しいですね。
2. 導入方法
まずは、公式サイトから必要ファイルをダウンロードします。
https://animejs.com/
使用するのは、「anime.min.js」と「animejs.css」です。
こちらをHTMLに読み込みます。
そして、アニメーションさせたいターゲットを指定して、パラメータにアニメーションを調整するプロパティなどを設定して実装します。
今回詳しい設定方法などは割愛しますが、公式サイトのドキュメントや、それを日本語に翻訳したサイトなどがあったので、ご紹介させていただきます。
公式サイトのドキュメント
https://animejs.com/documentation/
anime.jsを日本語翻訳してくれているサイトもありました。
https://tr.you84815.space/animejs/
3. 作成したアニメーション
こちらが、ドキュメントを元に作成したアニメーションです。
公式サイトのドキュメントの「STAGGERING：GRID」を元に、回転などを加えたもの。
SVGアニメーションも簡単に実装できます。少しわかりにくいですが丑です。
4. まとめ
見て楽しい。作って楽しい。そんなアニメーションが簡単に作れて、しかも軽い！という良いことづくしのanime.jsライブラリ。
Webサイト制作でも活躍してくれそうです！
