[JS]最近のWebサイトで見かける気持ちいいアニメーションや便利な機能が実装できる、使いやすいスクリプトのまとめ
Post on:2016年3月14日
最近のWebサイトでよく見かける気持ちいいアニメーションを使ったコンテンツやエフェクト、便利な機能が実装できるjQueryのプラグインやスクリプトを紹介します。
![最近のWebサイトで見かける、気持ちいいアニメーションや便利な機能が実装できる、使いやすいスクリプトのまとめ](http://coliss.com/wp-content/uploads-201601/2016031405.png)
フォント: 851チカラヅヨク
![デモのアニメーション](http://coliss.com/wp-content/uploads-201601/2016031407-01.gif)
Bubble Layout
Bubble Layout -GitHub
まずはアニメーションを使った斬新なUI、バブルレイアウト。
ベースにはmo.jsが使われており、バブルをクリックしてからの遷移だけでなく、バブル自体も楽しいアニメーションで動かすことができます。デモページで実際の動きに触れてみてください。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201504/2015-jquery-02.gif)
mo.jsはこちら。SVGベースの動きが美しいアニメーションのライブラリです。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201601/2016031407-02.gif)
コンテンツを短冊状に区切り、スクロールさせるウェーブスクロール。スクロール操作だけでなく、ドラッグ操作でその箇所のみを短冊状にすることもできます。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201601/2016031407-03.gif)
Google Tipsに採用されているカード型コンテンツにインスパイアされたスクリプト。チップスが集まってくるようなエフェクトはコンテンツに合ってますね。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201601/2016031407-04.gif)
最近また見直されてきた無限スクロールを実装できるスクリプト。勝手にコンテンツを読み込むのではなく、ユーザーのアクションをトリガーに読み込みます。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201601/2016031407-05.gif)
箱にこだわってる人にオススメ。あらゆるものを立方体にし、アニメーションで回転させます。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201601/2016031407-06.gif)
ハンバーガーメニューの進化形、レスポンシブ対応のナビゲーションです。アイテムの数は表示サイズによって調整されます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016031406-01.png)
表示サイズに合わせて、カラム数や溝を指定してコンテンツを配置できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016031406-02.png)
ScrollReveal.js
ScrollReveal.js -GitHub
スクロールに合わせて、コンテンツをアニメーションで表示します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016031406-03.png)
アニメーションをキーフレームを使ってコントロールできるスクリプト。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016031406-05.png)
Subscribe Better
Subscribe Better- GitHub
ページの最下部にいくと、モーダルウインドウを表示します。最初や途中に出されるとイラっとしますが、それに比べると最下部なら、という気持ちになります。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016031406-04.png)
スマホ・タブレット・デスクトップのブラウザがさまざまな機能(WebGL, Canvas, rem unit, async属性、タッチイベントなど)に対応しているか判別し、その判定を利用することができます。
sponsors