最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法として
パララックス（少々今さら感も感じますが・・・）効果に加えて最近では
コンテンツ全体をフルスクリーン表示にして、
スクロールすることで1コンテンツ分が自動でスクロールされ
次画面へ遷移するさせる技法がよく見られます。

そんなWebページ内でスクロール効果を使った動作を実装する際に役立ちそうな
JSスクリプト＆jQueryプラグインを3つほど紹介してみます。

skrollr – parallax scrolling for the masses

skrollr – parallax scrolling for the masses

スクロールによって様々なパララックス効果を簡単に実装することができる
軽量JSスクリプト「skrollr」。

デモページを見るだけでもこの「skrollr」で
様々なパターンのパララックスエフェクトが実装できることがわかります。

全体はHTML5とCSS3アニメーションで構成されていて
data属性を使って各エレメントにアニメーション設定をするようになっています。

上記のデモ画面に加えて
下記ではスクロールによって要素を回転させるパターンや
シンプルに背景画像のみにパララックス効果を付けるパターンなど
いろいろなサンプルが用意されています。

skrollr/examples at master・Prinzhorn/skrollr・GitHub

jQuery無しで使用可能になっておりとても軽量で構成されています。
目新しいパララックス用スクリプトではないですが
いざパララックスサイトを作ることになった時には
とても便利に使えそうです。

fullPage.js One Page Scroll Sites

fullPage.js One Page Scroll Sites

最近ではiPhone5sのプロダクトサイトでも使用されている
1つのコンテンツをフルスクリーン表示させて
スクロールすることで1ページ分が自動でスクロールし
次のコンテンツへ移動する見せ方。

このUIを簡単に実装することができるjQueryプラグイン「fullPage.js」。

縦スクロールだけでなく
横スライドでの実装も可能になっています。

全体構成も任意のクラスをつけたブロック要素によって
表示するコンテンツ分制御されているので
実装もとても簡単そうです。

jQuery One Page Scroll by Pete R. | The Pete Design

jQuery One Page Scroll by Pete R. | The Pete Design

上の「fullPage.js」と動作はほぼ同じで
1つのコンテンツごとにスクロールさせて次のコンテンツへ移動する
jQueryプラグイン「jquery.onepage-scroll.js」。

こちらの全体構成もとてもシンプルになっています。
デモページでは1つのコンテンツが＜section＞タグで実装されていますが
オプションで他のタグに変更することも可能になっており
スクロールの際のイージングや、ページネーションの有無、
スクロールした際にURLを変更するかどうか、なども設定可能なようです。

ですが残念ながらIEでは動作保証されていないようです。

以上3点、スクロールしてWebページを効果的に魅せる方法として
便利に使えそうなスクリプトの紹介でした。

以前ここで紹介させていただたパララックス用のjQueryプラグイン
パララックス制作などで使えるスクロールして特定の位置でアニメーションなどの処理を実行させることが出来るjQueryプラグイン「jquery-peekaboo」「jQuery Waypoints」 | BlackFlag

などと組み合わせたりすることでも
Webページをスクロールして演出を加える仕掛けで
いろいろと遊べそうな気もしています。

サイト内にスクロール技法を実装する際にぜひ。。。