スクロールしよう。iPhone 5sのページを再現「jQuery One Page Scroll」
jQuery One Page ScrollはjQuery/JavaScript製のソフトウェアです。
ここ最近スクロールを上手に使って効果的な見せ方をするサイトが増えています。その一つがiPhone 5sの商品紹介ページです。その表示を真似したソフトウェアがjQuery One Page Scrollです。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 11.23.33.1380455039.png)
トップページです。iPhone 5s風のイラストですね。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 11.23.37.1380455042.png)
ちょっとスクロールしようとすると一気に2つ目のスライドまで滑っていきます。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 11.23.41.1380455046.png)
さらにその下まで。3つのスライドがスクロールで切り替えられます。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-29 11.23.55.1380455054.png)
ウィンドウ幅を縮めてもいい感じに表示できます。
使い方は簡単で、sectionタグごとにコンテンツを記述します。後はjQuery One Page Scrollを読み込んで**$(".main").onepage_scroll()**のようにメソッドを実行すれば良いだけです。
Webデザインは模倣からはじまります。jQuery One Page Scrollについても同様で、iPhone 5sページの格好いいイフェクトを真似して実装することでそこからアイディアのエッセンスを得ようとしているのが垣間みれます。
Pinterest風の表示が一気に流行ったのと同様にワンページスクロール系のページも増えています。プロジェクトの紹介など一つのページで起承転結が表されるような場合に使えますので覚えておくと良いでしょう。