最近増えつつある、Webサイトの各コンテンツを、ページを切り替えて見せるのではなく、
ページ内をスクロールしてコンテンツ展開しているWebサイト。

海外のサイトでよく見かけるようになった手法ですが、
その様な、コンテンツ全体をスクロール展開している色々なWebサイトをまとめた、
ショーケース記事を自分用メモとして2つほど紹介。

Fancy Scrolling Sites | CSS-Tricks


Fancy Scrolling Sites | CSS-Tricks

サイト全体をスクロールして見せているサイト集。
縦スクロールのみではなく、横スクロールと織り交ぜたり
斜めにスクロールしたりとさまざま。

いくつか挙げてみると、、、

The Art of FLIGHT


The Art of FLIGHT

ACTIVATE


ACTIVATE

独特な手法でサイト全体をスクロール操作しているサイトが
9つほど紹介されています。

もう一つの記事は以下。

25 Splendid Examples of Horizontal Scrolling In WebDesign


25 Splendid Examples of Horizontal Scrolling In WebDesign

こっちのショーケースは横スクロールでコンテンツ展開をしているWebサイトのまとめ。
普通なら操作の煩わしさとして横スクロールは避けることが良いとされていますが
どのサイトもうまく演出面に取り込めていると感じます。

いくつか挙げてみると、、、

Dennis Kleine aka TheArtificer * User Experience, Usability, Design & Development


Dennis Kleine aka TheArtificer * User Experience, Usability, Design & Development

Maidstone Driving Lessons | Ladybird School of Motoring


Maidstone Driving Lessons | Ladybird School of Motoring

スクロールでコンテンツ展開するサイトは、
ページ内の「戻る」「進む」の動作や、ブックマーク問題などありますが
それらに関しても色々と工夫を凝らしている部分もあるので
同じようなサイトを作る際には参考になりそうな部分が多々あります。

サイト全体をスクロールさせる構成のWebサイトを作る際の参考にぜひ。。。

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

Related Posts

Comments (2)

  • tsukasa | 2011.12.17 23:26

    こんにちは。どれも大変参考にさせていただきました。
    この様なスクロールアニメーション(?)のソースコードを公開しているサイトや使い方を解説しているサイトがあればご紹介していただけないでしょうか?

    自分で探しても見つけられなかったもので。。。

  • BlackFlag | 2011.12.17 23:54

    >tsukasaさん

    コメントありがとうございます。

    こういうスクロールの動作について解説しているサイトは
    あまり見かけたことがありませんが(何度か見かけたことはありますがURLとかメモしてなかったです・・・)
    当記事で紹介している様なサイトのソースの中を探ることで
    どういった構成で作られているかは見つけられると思います。

    探ることで、使用しているプラグインとかも見つけられるかもしれないので
    いろいろなサイトのソースを見てみてください!

    よろしくお願いします。







コメント内容

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

ページ内をスクロールしてコンテンツ展開するWebサイト集「Fancy Scrolling Sites」&「25 Horizontal Scrolling In WebDesign」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR