たった1行で追加できるものも!簡単にアニメーションを加えられるJavaScript&CSSプラグイン14選
JavaScriptやCSSだけでアニメーションを実装できるようになった現在でも、ゼロからアニメーションを作りあげていく作業は時間がかかってしまいます。
CSSやJavaScriptのプラグインを使えば、簡単な設定で、標準のアニメーションでは表現できなかった豊かな動きを数行で実装することが可能です。
現在は多数のプラグインがリリースされており、目的に合わせて選択できます。
今回は、ホームページに簡単にアニメーションを加えられるJavaScript&CSSプラグインをご紹介します。
中にはたったの1行で実装できるものあります。自社ホームページに合ったプラグインを探してみましょう。
Webサイトに簡単にアニメーションを加えられるJavaScript&CSSプラグイン14選
1. Dynamics.js
[Dynamics.js]は、標準で9つのアニメーション効果が用意されているJavaScriptベースのアニメーションライブラリです。
「duration」(持続時間)「frequency」(回数)「anticipationSize」(動作の大きさ)などの項目を、実際の物理法則に基づいたアニメーションでオブジェクトを動かすことができます。
2. It’s Tuesday.
ユニークな名前のIt’s Tuesdayは、ほんの一瞬の動き(1秒未満)のCSSアニメーションライブラリで、他のプラグインには依存しないライブラリです。
わずかなタイミングでアニメーションが実行されるので、マイクロインタラクションの実装にも最適です。
他のライブラリにはないユニークな動きをするので、ユーザーの視線を集めたい部分に使ってみましょう。
https://shakrmedia.github.io/tuesday/
3. Vivus.js
Vivus.jsは、SVGアニメーションを簡単に実装することのできるJavaScriptの軽量クラスです。
他のライブラリにも依存していないため、すぐに利用することができます。
一口にSVGアニメーションと言っても、さまざまなアニメーションタイプが用意されています。
それぞれの線を少しずつ遅らせながら描く「Delayed」、それぞれの線を同時に描く「Sync」、1本ずつ線を加えていく「OneByOne」の描画モードに加え、パスのタイミング、アニメーションのタイミング、そしてどの線から書くかを決められる「シナリオシンク」モードがあります。
http://maxwellito.github.io/vivus/
4. Popmotion
PopmotionはJavaScriptで作られた10KB未満の超軽量なモーションエンジンで、CSSアニメーションだけでなくSVGアニメーションにも対応しています。
カラーブレンディング機能も付いているので、(今流行中の)色の変わるグラデーションボタンなども実装することができます。
5. Transit
Transitは2D・3Dのスムーズなトランジションや変形を加えることができるjQueryプラグインです。
動きはシンプルなものが多いですが、実装が簡単で、動きとしては短めのものが多いので、マイクロインタラクションを実装したい部分に加えてみてもいいでしょう。
http://ricostacruz.com/jquery.transit/
6. Rocket
Rocketはその名の通り、ある点から別の点に向けてオブジェクトを飛ばすようなアニメーションを実装することができるJavaScriptベースのプラグインです。
使い所に迷うかもしれませんが、アイデア次第では面白い使い道が出てくるかもしれません。
8つのアニメーション効果も非常にユニークです。
https://minimamente.com/example/rocket/
7. Morf.js
Morf.jsはカスタムイージング処理に対応したCSSで動かしているJavaScriptライブラリです。
およそ40のトランジション効果を組み合わせることで、独特な動きをするアニメーションを実装することができます。
フレームごとに制御することも可能です。
http://www.joelambert.co.uk/morf/
8. Voxel.css
voxel.cssは、3Dレンダリングに対応したCSSベースのアニメーションフレームワークで、PNGやGIFアニメーションなどの素材を立体的に表示できます。
3Dというと複雑なコーディングが必要なように聞こえますが、実際には数行のコードを追加するだけで、他のサイトでは見ることができないような面白い3Dアニメーションが完成します。
9. jQuery DrawSVG
jQuery DrawSVGはSVGアニメーションをjQueryで制御することのできるプラグインです。
たった2KB以下と非常に軽量で、使い方も非常に簡単です。
var $svg = $('svg').drawsvg();
$svg.drawsvg('animate');
以上のように、最短たった2行でSVGアニメを動かすことができます。
もちろん、用意されたオプションを加えることで味のある動きに変えることも可能です。
http://leocs.me/jquery-drawsvg/
10. iconate.js
iconate.jsは、アニメーションでアイコンを動かすことができるクールなJavaScriptライブラリです。
使い方は簡単で、アイコンとトランジションを選ぶだけです。
アイコンはFont Awesomeのほか、Bootstrap Glyphiconsも利用できます。
https://bitshadow.github.io/iconate/
11. Obnoxious.css
Obnoxious.cssは、その名が示すように、ホラー映画にでも出てきそうな不気味なアニメーションが5種類用意されているCSSプラグインです。
オブジェクトにclass名を指定するだけで実装できます。
12. Rythm.js
Rythm.jsは、名前の通りオブジェクトがビートを刻むようなアニメーションを実装することができます。
特徴的なのは、音楽を用意すればそれに合わせてアニメーションされるということです。
マイクをブラウザと連動させれば、ユーザーが歌うとそれに合わせて動くといったこともできるようになります。
https://okazari.github.io/Rythm.js/
13. ScrollReveal
ScrollRevealは、スクロールに合わせてふわりと表示させることができるアニメーションプラグインです。
もちろんモバイル端末のブラウザにも対応しています。
非常に簡単に導入でき、使い勝手もよさそうです。
14. 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サイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- フレームワーク
- フレームワークとは、アプリケーションソフトを開発する際によく必要をされる汎用的な機能をまとめて提供し、アプリケーションの土台として機能するソフトウェアのことです。 元々は枠組み、下部構想、構造、組織という意味の英単語です。アプリケーションのひな形であり、これを開発に利用することで、大幅な効率の向上が見込めます。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング