[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ

Post on:2013年10月2日

sponsors

最近よく見かけるかっこいいコンテンツやエフェクトを実装できるjQueryのプラグインを紹介します。

ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。
こういう作りは特にタブレットで操作がしやすいですね。

スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。

スクロールに加速やバウンド、ちょっと通り過ぎて戻ったりといった30種類以上のアニメーションのエフェクトをつけたり、個別にスクロール後の位置補正もできるスクリプト。

垂直方向にスクロールすると、コンテンツが「水平方向」に移動し、パララックスにも対応したスクリプト。

縦長の1ページで構成されたコンテンツですが、パネルを一枚一枚めくるようなエフェクトで表示します。

スクロールを使ったコンテンツで困るのが、ナビゲーションなどの定位置要素の配色。そんな時はこのスクリプトを使うと暗い明るいを自動で判定するので、最適なカラーを設定できます。
キャプチャは一枚の画像内で、アローは暗い背景、下のナビは明るい背景で判別されています。

ナビゲーションボタンをクリックすると、コンテンツを3Dに斜めに傾けダイナミックなアニメーションで、ナビゲーションを表示します。

これもナビゲーション表示のエフェクトで、バウンドするエフェクトが気持ちいいです。海外のデザインコミュニティでこのエフェクト好きって人が多いみたいですね。

カード状の複数のパネルを積み重ね、アニメーションで折り畳みするスクリプト。

さまざまなメッセージを指定した位置にアニメーションで表示します。
スクロールしても定位置に表示され、フェードのエフェクトもさりげなくてかっこいい。

iPhone, Androidなど、スマフォ・タブレット・デスクトップのデバイスを判定し、CSSのclassとして簡単に利用できるスクリプト。