たった1行で追加できるものも！簡単にアニメーションを加えられるJavaScript＆CSSプラグイン17選
- 2017年8月16日
- 2,408
ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。Twitterでも面白いWebサービスなどを紹介しています。よろしければそちらもチェックしてみてください。
>> 執筆記事一覧はこちら
JavaScriptやCSSだけでアニメーションを実装できるようになった現在でも、ゼロからアニメーションを作りあげていく作業は時間がかかってしまいます。
CSSやJavaScriptのプラグインを使えば、簡単な設定で、標準のアニメーションでは表現できなかった豊かな動きを数行で実装することが可能です。
現在は多数のプラグインがリリースされており、目的に合わせて選択できます。
今回は、ホームページに簡単にアニメーションを加えられるJavaScript＆CSSプラグインをご紹介します。
中にはたったの1行で実装できるものあります。自社ホームページに合ったプラグインを探してみましょう。
Webサイトに簡単にアニメーションを加えられるJavaScript＆CSSプラグイン17選
1. Dynamics.js
Dynamics.jsは、標準で9つのアニメーション効果が用意されているJavaScriptベースのアニメーションライブラリです。
「duration」(持続時間)「frequency」(回数)「anticipationSize」(動作の大きさ)などの項目を、実際の物理法則に基づいたアニメーションでオブジェクトを動かすことができます。
2. Sequence.js
Sequence.jsはJavaScriptで製作されていながらもCSSをアニメーションエンジンとして取り入れたレスポンシブ対応で、スマートフォンやタブレットのタッチ可能なステップアニメーションを実装できるアニメーションフレームワークです。
スライダーやWebプレゼンテーション、ポップアップバナーをホームページ上でスムーズに表示させたい時に最適です。
Sequence.jsで作成されたホームページのテンプレートをダウンロードすることも可能で、その中のいくつかは無料で利用することができます。
こうしたテンプレートはそのまま使えるほどクオリティが高いものになっており、テーマストアからダウンロードすることが可能です。
3. It’s Tuesday.
ユニークな名前のIt’s Tuesdayは、ほんの一瞬の動き(1秒未満)のCSSアニメーションライブラリで、他のプラグインには依存しないライブラリです。
わずかなタイミングでアニメーションが実行されるので、マイクロインタラクションの実装にも最適です。
他のライブラリにはないユニークな動きをするので、ユーザーの視線を集めたい部分に使ってみましょう。
https://shakrmedia.github.io/tuesday/
4. Vivus.js
Vivus.jsは、SVGアニメーションを簡単に実装することのできるJavaScriptの軽量クラスです。
他のライブラリにも依存していないため、すぐに利用することができます。
一口にSVGアニメーションと言っても、さまざまなアニメーションタイプが用意されています。
それぞれの線を少しずつ遅らせながら描く「Delayed」、それぞれの線を同時に描く「Sync」、1本ずつ線を加えていく「OneByOne」の描画モードに加え、パスのタイミング、アニメーションのタイミング、そしてどの線から書くかを決められる「シナリオシンク」モードがあります。
http://maxwellito.github.io/vivus/
5. Bonsai.js
Bonsai.jsは、グラフィックAPIとSVGの描画エンジンを搭載した軽量なグラフィックライブラリです。
すでにあるSVGファイルを読み込んでいくのではなく、SVGオブジェクトを用意されたJavaScriptクラスで描画することができます。
ドキュメントにはEasing処理やグラデーション塗りの設定など、さまざまな実装方法が解説されています。
APIが使えるので、URLによってアニメーションの動きを制御することもできます。
6. Popmotion
PopmotionはJavaScriptで作られた10KB未満の超軽量なモーションエンジンで、CSSアニメーションだけでなくSVGアニメーションにも対応しています。
カラーブレンディング機能も付いているので、(今流行中の)色の変わるグラデーションボタンなども実装することができます。
7. Transit
Transitは2D・3Dのスムーズなトランジションや変形を加えることができるjQueryプラグインです。
動きはシンプルなものが多いですが、実装が簡単で、動きとしては短めのものが多いので、マイクロインタラクションを実装したい部分に加えてみてもいいでしょう。
http://ricostacruz.com/jquery.transit/
8. Rocket
Rocketはその名の通り、ある点から別の点に向けてオブジェクトを飛ばすようなアニメーションを実装することができるJavaScriptベースのプラグインです。
使い所に迷うかもしれませんが、アイデア次第では面白い使い道が出てくるかもしれません。
8つのアニメーション効果も非常にユニークです。
https://minimamente.com/example/rocket/
9. Shift.css
Shift.cssはコンテナの中に入れた複数のオブジェクトをアニメーションで表示させることができるフレームワークです。
全部で15種類のアニメーションが用意されており、スライドショーのような特定のキャンバス内のオブジェクトを動かすのに向いています。
http://shift.octavector.co.uk/
10. Morf.js
Morf.jsはカスタムイージング処理に対応したCSSで動かしているJavaScriptライブラリです。
およそ40のトランジション効果を組み合わせることで、独特な動きをするアニメーションを実装することができます。
フレームごとに制御することも可能です。
http://www.joelambert.co.uk/morf/
11. Voxel.css
voxel.cssは、3Dレンダリングに対応したCSSベースのアニメーションフレームワークで、PNGやGIFアニメーションなどの素材を立体的に表示できます。
3Dというと複雑なコーディングが必要なように聞こえますが、実際には数行のコードを追加するだけで、他のサイトでは見ることができないような面白い3Dアニメーションが完成します。
12. jQuery DrawSVG
jQuery DrawSVGはSVGアニメーションをjQueryで制御することのできるプラグインです。
たった2KB以下と非常に軽量で、使い方も非常に簡単です。
var $svg = $('svg').drawsvg();
$svg.drawsvg('animate');
以上のように、最短たった2行でSVGアニメを動かすことができます。
もちろん、用意されたオプションを加えることで味のある動きに変えることも可能です。
http://leocs.me/jquery-drawsvg/
13. iconate.js
iconate.jsは、アニメーションでアイコンを動かすことができるクールなJavaScriptライブラリです。
使い方は簡単で、アイコンとトランジションを選ぶだけです。
アイコンはFont Awesomeのほか、Bootstrap Glyphiconsも利用できます。
https://bitshadow.github.io/iconate/
14. Obnoxious.css
Obnoxious.cssは、その名が示すように、ホラー映画にでも出てきそうな不気味なアニメーションが5種類用意されているCSSプラグインです。
オブジェクトにclass名を指定するだけで実装できます。
15. Rythm.js
Rythm.jsは、名前の通りオブジェクトがビートを刻むようなアニメーションを実装することができます。
特徴的なのは、音楽を用意すればそれに合わせてアニメーションされるということです。
マイクをブラウザと連動させれば、ユーザーが歌うとそれに合わせて動くといったこともできるようになります。
https://okazari.github.io/Rythm.js/
16. ScrollReveal
ScrollRevealは、スクロールに合わせてふわりと表示させることができるアニメーションプラグインです。
もちろんモバイル端末のブラウザにも対応しています。
非常に簡単に導入でき、使い勝手もよさそうです。
17. Rellax
RellaxはVanilla JavaScriptを使用した軽量なパララックスエフェクトのライブラリです。
classに「rellax」を指定して、視差速度を調整すれば、すぐにパララックスエフェクトが実装できます。
<div class="rellax">パララックス中・・・</div>
https://dixonandmoe.com/rellax/
まとめ
複雑なアニメーションを作る場合には冗長なコードを書かなければいけないので、骨の折れる作業になりがちです。
今回ご紹介したようまプラグインを使えば、たった数行で高品質なアニメーションが実装できます。
作業効率化しつつユニークなホームページ作りを進めたい方はぜひ利用してみてはいかがでしょうか。
