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