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

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

デモのキャプチャ

fullPage.js

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

デモのキャプチャ

FancyScroll.js

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

デモのキャプチャ

AnimateScroll

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

デモのキャプチャ

jInvertScroll

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

デモのキャプチャ

Panelize

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

デモのキャプチャ

BackgroundCheck

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

デモのキャプチャ

Box Lid Menu

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

デモのキャプチャ

Bounce Menu

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

デモのキャプチャ

Stacky

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

デモのキャプチャ

Oh Snap

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

デモのキャプチャ

device.js

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

top of page

©2017 coliss