
たった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/
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- タブレット
- タブレットとは、元々「板状のもの」「銘板」といった意味の単語です。パソコンの分野で単にタブレットといえば、「ペンタブレット」や「タブレット型端末」などの板状のデバイス全般を指します。ここでは主にタブレット型端末について説明していきます。
- フレームワーク
- フレームワークとは、アプリケーションソフトを開発する際によく必要をされる汎用的な機能をまとめて提供し、アプリケーションの土台として機能するソフトウェアのことです。 元々は枠組み、下部構想、構造、組織という意味の英単語です。アプリケーションのひな形であり、これを開発に利用することで、大幅な効率の向上が見込めます。
- ポップアップ
- ホームページにおいてポップアップとは、現在見ているホームページの上に、重なるような状態で、新たな画面が開き、その最前面面に表示されることを言います。より目立つ、注目を集めることが出来る反面、見ている画面を遮るように表示されるので、不快に受け取られる傾向があります。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- ユーザー
- ユーザーとは、コンピューターやシステムを利用する人のことを指します。 利用者、使用者、消費者などの意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- URL
- URLとは、「Uniform Resource Locator」の略称です。情報がどこにあるのかを示すインターネット上の住所のようなものだと考えるとわかりやすいでしょう。各ページのURLは、インターネットブラウザの上部に文字列として表示されています。日本語では「統一資源位置指定子」という名称がついていますが、実際には日本でもURLという語が使われています。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- フレームワーク
- フレームワークとは、アプリケーションソフトを開発する際によく必要をされる汎用的な機能をまとめて提供し、アプリケーションの土台として機能するソフトウェアのことです。 元々は枠組み、下部構想、構造、組織という意味の英単語です。アプリケーションのひな形であり、これを開発に利用することで、大幅な効率の向上が見込めます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- フレームワーク
- フレームワークとは、アプリケーションソフトを開発する際によく必要をされる汎用的な機能をまとめて提供し、アプリケーションの土台として機能するソフトウェアのことです。 元々は枠組み、下部構想、構造、組織という意味の英単語です。アプリケーションのひな形であり、これを開発に利用することで、大幅な効率の向上が見込めます。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- ユーザー
- ユーザーとは、コンピューターやシステムを利用する人のことを指します。 利用者、使用者、消費者などの意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
おすすめ記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング