最近でもよく見かける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ページをスクロールして演出を加える仕掛けで
いろいろと遊べそうな気もしています。

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

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

簡単にパララックス実装可能な軽量スクリプト「skrollr」&コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR