1ページで完結するタイプのものがつくれます。
スクロールすると次のコンテンツへとつないでいき、商品やプロダクトなどを印象的にみせてくれます。
パララックスを取り入れたりしているものやフリップ型のコンテンツなどがあります。
そういった1ページ完結型のページを作成できる jQueryPluginを何点か集めました。
One Page Scroll【jQuery Plugin】
One Page Scroll
まずは、オーソドックスな感じのモノから。
このプラグインのなにが素敵かというととっても滑らかにスクロールしていくんですよね。上記のリンクでデモが見られるので是非みてみてください。
One page scroll navigation with css transforms
フリップ型の1ページスクロールです。
Fullscreen 3D One Page Scrolling Effect
スクロールしていくと、真ん中が左右に開いて次のコンテンツへ移動します。
両扉を開けていく感じです。。。
イメージ的には、お城のふすまを開いていく感じ？です。。。
pagePiling
こちらは、シャッターをあげていくような動きをしながら次のコンテンツへ移動します。
スクロールするとすぐに動き出すのですが、シャッターの上がり具合がほんの少しゆっくりなので気持ちいい感じに動いてくれます。
他にも、FullVideoに対応していたり、横スクロールにも対応している機能満載なプラグインです。
Fullpage-Parallax-Scrolling
パララックス型1ページスクロール
横のサイドナビがとってもかわいいなと思ったのでメモしたものです。
One Page CSS Navigation
OnePageに特徴というよりも、サイドのナビゲーションがわかりやすくて、とても素敵なつくりだなと思いメモしたものです。
1ページスクロールってインパクト重視になりがちでこういうところが疎かになりそうなので、気を付けたい部分でもあります。
One Page Scroll【SITE】
最後にOne Pageを作成する際に、参考になりそうなサイトをご紹介したいと思います。
BrightMedia
※音がなりますのでご注意ください。
すごく細かい仕掛けがたくさん施されています。
近未来的な感じでプラネタリウムのような世界観が素敵。音がでるのですが、試しに音量をOFFにしてみたらちょっと魅力が半減するなとわたしは思いました。
気になる方は試しに音ありと音なしを試してみてください。
One Page Love
その名前のとおり「One Page」だけを集めたサイトです。
なかなか最初から最後まで見るには時間が足りないくらい、たくさんストックされています。
ある珈琲ショップサイトでは、どうやって珈琲がつくられるのかというテーマで種をまくところからコーヒーになるまでの課程を「One Page」におさめているものなど、物語があったりしてとても面白いものがあるので、見ていると飽きませんね。
前にも同じようなものをまとめていました。
よろしければこちらもあわせてどうぞ。
