たった1行で追加できるものも！簡単にアニメーションを加えられるJavaScript＆CSSプラグイン17選
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/
まとめ
複雑なアニメーションを作る場合には冗長なコードを書かなければいけないので、骨の折れる作業になりがちです。
今回ご紹介したようま
プラグイン
を使えば、たった数行で高品質なアニメーションが実装できます。
作業効率化しつつユニークなホームページ作りを進めたい方はぜひ利用してみてはいかがでしょうか。