[JS]最近のWebサイトで見かける気持ちいいアニメーションや便利な機能が実装できる、使いやすいスクリプトのまとめ

最近のWebサイトでよく見かける気持ちいいアニメーションを使ったコンテンツやエフェクト、便利な機能が実装できるjQueryのプラグインやスクリプトを紹介します。

最近のWebサイトで見かける、気持ちいいアニメーションや便利な機能が実装できる、使いやすいスクリプトのまとめ

フォント: 851チカラヅヨク

デモのアニメーション

Bubble Layout
Bubble Layout -GitHub

まずはアニメーションを使った斬新なUI、バブルレイアウト。
ベースにはmo.jsが使われており、バブルをクリックしてからの遷移だけでなく、バブル自体も楽しいアニメーションで動かすことができます。デモページで実際の動きに触れてみてください。

デモのアニメーション

mo.js
mo.js- GitHub

mo.jsはこちら。SVGベースの動きが美しいアニメーションのライブラリです。

デモのアニメーション

Wavescroll (drag background)

コンテンツを短冊状に区切り、スクロールさせるウェーブスクロール。スクロール操作だけでなく、ドラッグ操作でその箇所のみを短冊状にすることもできます。

デモのアニメーション

Tip Cards
Tip Cards -GitHub

Google Tipsに採用されているカード型コンテンツにインスパイアされたスクリプト。チップスが集まってくるようなエフェクトはコンテンツに合ってますね。

デモのアニメーション

lavelamp.js- GitHub
デモページ

最近また見直されてきた無限スクロールを実装できるスクリプト。勝手にコンテンツを読み込むのではなく、ユーザーのアクションをトリガーに読み込みます。

デモのアニメーション

Turnbox.js
Turnbox.js -GitHub

箱にこだわってる人にオススメ。あらゆるものを立方体にし、アニメーションで回転させます。

デモのアニメーション

okeyNav -GitHub
デモページ

ハンバーガーメニューの進化形、レスポンシブ対応のナビゲーションです。アイテムの数は表示サイズによって調整されます。

サイトのキャプチャ

Bricks.js
Bricks.js -GitHub

表示サイズに合わせて、カラム数や溝を指定してコンテンツを配置できます。

サイトのキャプチャ

ScrollReveal.js
ScrollReveal.js -GitHub

スクロールに合わせて、コンテンツをアニメーションで表示します。

サイトのキャプチャ

Bounce.js
Bounce.js -GitHub

アニメーションをキーフレームを使ってコントロールできるスクリプト。

サイトのキャプチャ

Subscribe Better
Subscribe Better- GitHub

ページの最下部にいくと、モーダルウインドウを表示します。最初や途中に出されるとイラっとしますが、それに比べると最下部なら、という気持ちになります。

サイトのキャプチャ

Feature.js
Feature.js -GitHub

スマホ・タブレット・デスクトップのブラウザがさまざまな機能(WebGL, Canvas, rem unit, async属性、タッチイベントなど)に対応しているか判別し、その判定を利用することができます。

top of page

©2016 coliss
o