JavaScriptCSSだけでアニメーションを実装できるようになった現在でも、ゼロからアニメーションを作りあげていく作業は時間がかかってしまいます。
CSSやJavaScriptプラグインを使えば、簡単な設定で、標準のアニメーションでは表現できなかった豊かな動きを数行で実装することが可能です。

現在は多数のプラグインがリリースされており、目的に合わせて選択できます。

今回は、ホームページに簡単にアニメーションを加えられるJavaScriptCSSプラグインをご紹介します。
中にはたったの1行で実装できるものあります。自社ホームページに合ったプラグインを探してみましょう。

Webサイトに簡単にアニメーションを加えられるJavaScript&CSSプラグイン17選

1. Dynamics.js

01.png

Dynamics.jsは、標準で9つのアニメーション効果が用意されているJavaScriptベースのアニメーションライブラリです。

「duration」(持続時間)「frequency」(回数)「anticipationSize」(動作の大きさ)などの項目を、実際の物理法則に基づいたアニメーションでオブジェクトを動かすことができます。

http://dynamicsjs.com/

2. Sequence.js

02.png

Sequence.jsJavaScriptで製作されていながらもCSSをアニメーションエンジンとして取り入れたレスポンシブ対応で、スマートフォンやタブレットのタッチ可能なステップアニメーションを実装できるアニメーションフレームワークです。

スライダーやWebプレゼンテーション、ポップアップバナーをホームページ上でスムーズに表示させたい時に最適です。

Sequence.jsで作成されたホームページのテンプレートをダウンロードすることも可能で、その中のいくつかは無料で利用することができます。
こうしたテンプレートはそのまま使えるほどクオリティが高いものになっており、テーマストアからダウンロードすることが可能です。

http://www.sequencejs.com/

3. It’s Tuesday.

03.png

ユニークな名前のIt’s Tuesdayは、ほんの一瞬の動き(1秒未満)のCSSアニメーションライブラリで、他のプラグインには依存しないライブラリです。

わずかなタイミングでアニメーションが実行されるので、マイクロインタラクションの実装にも最適です。

他のライブラリにはないユニークな動きをするので、ユーザーの視線を集めたい部分に使ってみましょう。

https://shakrmedia.github.io/tuesday/

4. Vivus.js

04.png

Vivus.jsは、SVGアニメーションを簡単に実装することのできるJavaScriptの軽量クラスです。
他のライブラリにも依存していないため、すぐに利用することができます。

一口にSVGアニメーションと言っても、さまざまなアニメーションタイプが用意されています。
それぞれの線を少しずつ遅らせながら描く「Delayed」、それぞれの線を同時に描く「Sync」、1本ずつ線を加えていく「OneByOne」の描画モードに加え、パスのタイミング、アニメーションのタイミング、そしてどの線から書くかを決められる「シナリオシンク」モードがあります。

http://maxwellito.github.io/vivus/

5. Bonsai.js

05.png

Bonsai.jsは、グラフィックAPIとSVGの描画エンジンを搭載した軽量なグラフィックライブラリです。
すでにあるSVGファイルを読み込んでいくのではなく、SVGオブジェクトを用意されたJavaScriptクラスで描画することができます。

ドキュメントにはEasing処理やグラデーション塗りの設定など、さまざまな実装方法が解説されています。
APIが使えるので、URLによってアニメーションの動きを制御することもできます。

https://bonsaijs.org/

6. Popmotion

06.png

PopmotionJavaScriptで作られた10KB未満の超軽量なモーションエンジンで、CSSアニメーションだけでなくSVGアニメーションにも対応しています。

カラーブレンディング機能も付いているので、(今流行中の)色の変わるグラデーションボタンなども実装することができます。

https://popmotion.io/

7. Transit

07.png

Transitは2D・3Dのスムーズなトランジションや変形を加えることができるjQueryプラグインです。

動きはシンプルなものが多いですが、実装が簡単で、動きとしては短めのものが多いので、マイクロインタラクションを実装したい部分に加えてみてもいいでしょう。

http://ricostacruz.com/jquery.transit/

8. Rocket

08.png

Rocketはその名の通り、ある点から別の点に向けてオブジェクトを飛ばすようなアニメーションを実装することができるJavaScriptベースのプラグインです。

使い所に迷うかもしれませんが、アイデア次第では面白い使い道が出てくるかもしれません。
8つのアニメーション効果も非常にユニークです。

https://minimamente.com/example/rocket/

9. Shift.css

09.png

Shift.cssはコンテナの中に入れた複数のオブジェクトをアニメーションで表示させることができるフレームワークです。

全部で15種類のアニメーションが用意されており、スライドショーのような特定のキャンバス内のオブジェクトを動かすのに向いています。

http://shift.octavector.co.uk/

10. Morf.js

10.png

Morf.jsはカスタムイージング処理に対応したCSSで動かしているJavaScriptライブラリです。

およそ40のトランジション効果を組み合わせることで、独特な動きをするアニメーションを実装することができます。
フレームごとに制御することも可能です。

http://www.joelambert.co.uk/morf/

11. Voxel.css

11.png

voxel.cssは、3Dレンダリングに対応したCSSベースのアニメーションフレームワークで、PNGやGIFアニメーションなどの素材を立体的に表示できます。

3Dというと複雑なコーディングが必要なように聞こえますが、実際には数行のコードを追加するだけで、他のサイトでは見ることができないような面白い3Dアニメーションが完成します。

http://www.voxelcss.com/

12. jQuery DrawSVG

12.png

jQuery DrawSVGはSVGアニメーションをjQueryで制御することのできるプラグインです。
たった2KB以下と非常に軽量で、使い方も非常に簡単です。

var $svg = $('svg').drawsvg();
$svg.drawsvg('animate');

以上のように、最短たった2行でSVGアニメを動かすことができます。
もちろん、用意されたオプションを加えることで味のある動きに変えることも可能です。

http://leocs.me/jquery-drawsvg/

13. iconate.js

13.png

iconate.jsは、アニメーションでアイコンを動かすことができるクールなJavaScriptライブラリです。

使い方は簡単で、アイコンとトランジションを選ぶだけです。
アイコンはFont Awesomeのほか、Bootstrap Glyphiconsも利用できます。

https://bitshadow.github.io/iconate/

14. Obnoxious.css

14.png

Obnoxious.cssは、その名が示すように、ホラー映画にでも出てきそうな不気味なアニメーションが5種類用意されているCSSプラグインです。

オブジェクトにclass名を指定するだけで実装できます。

http://tholman.com/obnoxious/

15. Rythm.js

15.gif

Rythm.jsは、名前の通りオブジェクトがビートを刻むようなアニメーションを実装することができます。

特徴的なのは、音楽を用意すればそれに合わせてアニメーションされるということです。
マイクをブラウザと連動させれば、ユーザーが歌うとそれに合わせて動くといったこともできるようになります。

https://okazari.github.io/Rythm.js/

16. ScrollReveal

16.png

ScrollRevealは、スクロールに合わせてふわりと表示させることができるアニメーションプラグインです。

もちろんモバイル端末のブラウザにも対応しています。
非常に簡単に導入でき、使い勝手もよさそうです。

https://scrollrevealjs.org/

17. Rellax

17.png

RellaxはVanilla JavaScriptを使用した軽量なパララックスエフェクトのライブラリです。

classに「rellax」を指定して、視差速度を調整すれば、すぐにパララックスエフェクトが実装できます。

<div class="rellax">パララックス中・・・</div>

https://dixonandmoe.com/rellax/

まとめ

複雑なアニメーションを作る場合には冗長なコードを書かなければいけないので、骨の折れる作業になりがちです。
今回ご紹介したようまプラグインを使えば、たった数行で高品質なアニメーションが実装できます。

作業効率化しつつユニークなホームページ作りを進めたい方はぜひ利用してみてはいかがでしょうか。