❯❯❯ 低コスト・低リスクでグローバル展開!
「アジア越境ECの補助金・助成金プラン」
はこちら

LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

JavaScriptアニメーションライブラリー5選

テクニック

JavaScriptアニメーションライブラリー5選
Webページやアプリに躍動感を吹き込むWebアニメーション、今回は簡単にアニメーションを作るのに役立つJavaScriptアニメーションライブラリー5つを紹介します。

TypeIt

公式:https://www.typeitjs.com/

ポイントフレーズを活かせるテキストタイピングアニメーションです。このライブラリーを使用するとタイピング効果を簡単に実現することができます。

See the Pen
TypeIt test
by ryusinei (@ryusinei)
on CodePen.

SrollOut

公式:https://scroll-out.github.io/

CSS属性や変数を使い手軽にアニメーションをつけられます。1kbもいかない非常に軽いライブラリーであるし、どんなフレームワークを使っているとかには関係なく部分的に適用できるため、プロジェクトにも負担がないです。

See the Pen
Untitled
by ryusinei (@ryusinei)
on CodePen.

rellax

公式:https://dixonandmoe.com/rellax/

ページをスクロールする時、要素毎に異なる速さでスクロールされるように調整することができます。rellaxオプジェットを生成するだけでデフォルトの速さでスクロールされます。

See the Pen
Untitled
by ryusinei (@ryusinei)
on CodePen.

GSAP-greensock

公式:https://greensock.com/

公式サイトを見ると「開発者をアニメーションヒーローにしてくれるライプラリ」と書いていて、それほど強力なライブラリーでできることが多いので、余裕を持って一個づつやってみたら良いかと思います。

See the Pen
ScrollOut test
by ryusinei (@ryusinei)
on CodePen.

animejs

公式:https://animejs.com/

シンプルでありながら強力なAPIを備えた軽量のJavaScriptアニメーションライブラリです。 CSSプロパティ、SVG、DOM属性、JavaScriptオブジェクトで動作します。ドキュメントもよくできていますので、どんなアニメーションができて、それを実現するためにはどんなコードを作成すればいいのかもすぐ確認できます。

See the Pen
Porduct delivery status card for website
by Aryankapoor (@codewitharyann)
on CodePen.

 

 

見て楽しい、作って楽しいアニメーションが簡単に作れて、しかも軽いライプラリでした。今後のWebサイト制作でも活用できればと思います!