最近多いですねー、1ページで完結するタイプのサイト。One Page Loveのサイトなんかから、シングルページの事例も大量に見ることが出来ますし、パララックスやらフリップ型のコンテンツやら、なんか色々出てきてて着いて行くのがやっとです…

でも実際シングルページをつくろうとすると、え？何これどうなってんの？って物も多くてビビることもしばし。

ってことで、今日は僕が知ってる中で『お、これ、シングルページ作る時に使えるんじゃね？』って物を幾つかご紹介させて頂きます！

主にはシングルページデザインの表現の幅を広げるjQueryプラグインの紹介になるかなと思いますが、楽しい物も多いので、是非興味があれば試してみてくださいませ〜！

それではいってみましょー！

 

パララックススクローリング系プラグイン

この辺は以前に紹介したことがあるものばかりなので、ぱぱーっと行きます。

jQuery Waypoints

特定の位置に到達したら何かしらのアクションを起こすjQueryプラグインですねー。シングルページである場合はお世話になることも多かったプラグイン。最近は代用品も多くなってきましたが、まだまだその人気は高い方かとー。

以前、遊びで作ったパララックスサイトの時もお世話になってますので、よければご参考にどぞ〜。

 

Nikebetterworld Parallax Effect Demo | Ian Lunn – Front End Developer

こちらも同様に以前紹介させて頂いた事がありますね。パララックスデザインの火付け役的な感じで登場した『Nike Better world』のデモですね。こっから色々なプラグインの存在や表現方法の基礎を学んだ気がしますので、まずは再度ご紹介。

この辺まではシングルページ云々って言うより、以前お世話になったんで再共有って感じですが、こっからは僕のEvernoteで『Single Page plugin』みたいなんで検索して、出てきた物を片っ端かがご紹介しましょー！

 

Cool Kitten: A parallax scrolling responsive framework

こちらはちょっと面白い、パララックススクローリングを実装したレスポンシブフレームワークですねー。僕はレスポンシブフレームワークは『Responsive Grid System』一筋なので、今のところはお世話になったことは無いですが、レスポンシブとパララックスを実装したいという時にちょっと参考にしても良いかもですね〜。

 

skrollr – parallax scrolling for the masses

スクロールしてびっくり。なんでもアリかっ！って思わずツッコミ入れたくなりましたが、まーとにかく縦に横に回転に、様々なエフェクトを実装することが出来るJavascriptライブラリ。

 

フルスクリーンコンテンツ用プラグイン

シングルページによくあるフルスクリーンコンテンツを実装する上で結構便利そうなプラグインも色々あります！

rafaelfragosom/singlejs · GitHub

シングルページを作る時にとりあえず面倒なのがフルスクリーンコンテンツのスクローとか、画像リサイズとか、とりあえずその辺… でもSingle.jsを使えばそんなフルスクリーンコンテンツの画面スクロールも、画像リサイズもかなり簡単に実装できます！ダウンロードするとデモページが見れるので、見たらすぐわかるかなと思います〜！

 

fullPage.js One Page Scroll Sites

さっきのSingle.jsを試した後で、このfullPage.jsを試すとその高機能さにびっくりすると思います。さっきのSingle.jsに色々な機能を足してった感じ。スライドコンテンツや画面リサイズの対応。タブレット対応など、フルスクリーンコンテンツを含んだシングルページデザインを行う時は嬉しいかもしれないプラグインですね！

 

ナビゲーション関連

大抵はボタンを押すと下にスムーススクロールするタイプのナビが多いと思いますが、そんなシングルページで使えそうなナビゲーションも結構色々ありますよー。

SMINT | The simple jQuery plugin for lovers of one page websites.

こちらはオーソドックスな横型ナビゲーションで、下にスクロールしていくとページ上部に固定され、尚且つ現在のコンテンツ位置を教えてくれるナビゲーションですね。シングルページのコンテンツには多いタイプかと思います。

 

Single Page Nav Demo

これもかなりシンプルですが、ページ上部に固定されて、現在みているセッションを教えてくれるタイプの物ですねー！

 

jQuery One Page Nav

これも同じく現在見ているコンテンツの位置がわかるシングルページナビゲーションの基本的な形のものですが、このくらいシンプルな方が使い勝手良いという人も多いすかね。よさ気〜。

 

Ascensor.js

これはアクセスして実際操作してみたほうが分かりやすいと思いますが、十字キーを使って縦、横と画面移動し、画面移動するためのjQueryプラグインですね。

かなり使い所は限定されそうですが、HTMLプレゼンテーションが流行った頃なんか、こんな感じのナビゲーションありましたよね。一応チェックーな感じで。

 

スクローリング系

スクロールでコンテンツが展開する系のプラグイン色々。パララックスもそうだけど、それ以外をご紹介しときます！

Victa/curtain.js · GitHub

もう一年以上メンテナンス止まってるので、どうかなーと思いつつ、一度提案に使わせて頂いた事があるのでご紹介。

なんか紙芝居みたいなコンテンツ移動が可能なプラグイン、スクローリングプラグインって名前が付いているよう、どのエリアをどういう風にスクロールさせるか指定することが出来るようになります。… っていうか、サンプル見た方が早いので、どうぞ〜。

 

jQuery.SnapScroll

スナップスクロールという名前からもわかりますが、なんかスクロールアクションがあったら次のコンテンツまでスライドするタイプのスクローリングプラグイン。あーこれ探してたんよーって事もありそうだったので、とりあえず共有！

 

jQuery One Page Scroll by Pete R. | The Pete Design

で、さっきのスナップスクロールみたいなのを、もろAppleっぽい感じにしたのがこちらのスクローリングプラグイン。美しいっすねー。

 

チュートリアル系

シングルページデザインを作るためのチュートリアルやデモサイトを用意している記事です！一度こういうの見ながらなぞって見ても良いかもですねー！

FullPaged: A Single Paged Layout jQuery Plugin with UI Animations | InsertHTML

これはよさ気ですね！レスポンシブ対応もされてあって非常に分かりやすい！デモページも数種類あって、ナビゲーションの位置によって使い勝手も変わってきそうです。とりあえずメモ！

 

Coding a CSS3 & HTML5 One-Page Website Template | Tutorialzine

ここまで紹介してきたボタンでページ内遷移してく物とは全然違う、ただのシングルページレイアウトのテンプレートですが、基本っぽい感じの内容だったのでとりあえずご紹介！

 

以上、いかがでしたでしょうか？

とりあえず個人的にメモっといた方が良いかなぁって奴をEvernoteに突っ込んでて、それを記事にしただけっていうかなり手抜き感満載な内容でしたが、こういう備忘録記事は本当後から自分の役にも立っているので、便利なんすよね〜。

もしどれか一つでも皆さんの参考になれば嬉しい限りです〜！

ではでは、皆様、よきシングルページライフを〜。