最近でもよく見かける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ページをスクロールして演出を加える仕掛けで、いろいろと遊べそうな気もしています。
サイト内にスクロール技法を実装する際にぜひ。。。