onepage

1ページで完結するタイプのものがつくれます。

スクロールすると次のコンテンツへとつないでいき、商品やプロダクトなどを印象的にみせてくれます。
パララックスを取り入れたりしているものやフリップ型のコンテンツなどがあります。

そういった1ページ完結型のページを作成できる jQueryPluginを何点か集めました。

One Page Scroll【jQuery Plugin】

One Page Scroll

onepage_scroll

まずは、オーソドックスな感じのモノから。

このプラグインのなにが素敵かというととっても滑らかにスクロールしていくんですよね。上記のリンクでデモが見られるので是非みてみてください。

One page scroll navigation with css transforms

See the Pen One page scroll navigation with css transforms by Nikolay Talanov (@suez) on CodePen.

フリップ型の1ページスクロールです。

Fullscreen 3D One Page Scrolling Effect

Fullscreen 3D One Page Scrolling Effect

スクロールしていくと、真ん中が左右に開いて次のコンテンツへ移動します。

両扉を開けていく感じです。。。
イメージ的には、お城のふすまを開いていく感じ?です。。。

pagePiling

pagepiling

こちらは、シャッターをあげていくような動きをしながら次のコンテンツへ移動します。

スクロールするとすぐに動き出すのですが、シャッターの上がり具合がほんの少しゆっくりなので気持ちいい感じに動いてくれます。

他にも、FullVideoに対応していたり、横スクロールにも対応している機能満載なプラグインです。

Fullpage-Parallax-Scrolling

Fullpage-Parallax-Scrolling

パララックス型1ページスクロール

横のサイドナビがとってもかわいいなと思ったのでメモしたものです。

One Page CSS Navigation

See the Pen One Page CSS Navigation by Nazmul Hasan Rupok (@rupok) on CodePen.

OnePageに特徴というよりも、サイドのナビゲーションがわかりやすくて、とても素敵なつくりだなと思いメモしたものです。

1ページスクロールってインパクト重視になりがちでこういうところが疎かになりそうなので、気を付けたい部分でもあります。

One Page Scroll【SITE】

最後にOne Pageを作成する際に、参考になりそうなサイトをご紹介したいと思います。

BrightMedia

brightmedia

※音がなりますのでご注意ください。

すごく細かい仕掛けがたくさん施されています。

近未来的な感じでプラネタリウムのような世界観が素敵。音がでるのですが、試しに音量をOFFにしてみたらちょっと魅力が半減するなとわたしは思いました。
気になる方は試しに音ありと音なしを試してみてください。

One Page Love

onepagelove

その名前のとおり「One Page」だけを集めたサイトです。
なかなか最初から最後まで見るには時間が足りないくらい、たくさんストックされています。

ある珈琲ショップサイトでは、どうやって珈琲がつくられるのかというテーマで種をまくところからコーヒーになるまでの課程を「One Page」におさめているものなど、物語があったりしてとても面白いものがあるので、見ていると飽きませんね。


前にも同じようなものをまとめていました。
よろしければこちらもあわせてどうぞ。

ADVERTISEMENT

Author:

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

Message

トップへ戻る