jQueryのプラグインfullPage.jsでスクロールするとsectionをスライドして、紙芝居風のページが作れます。
ウィンドウの高さが無い環境のために、オプションもあるみたいですが、変な所にスクロールバーが出てしまったりで、見た目が良くない感じなので、各sectionの要素を少なめにデザインした方がよいです。
基本的にsection完結型なのですが、コールバックがあるのでトリガーに使うのが良いかも。
もう一つのスクロールコンテンツを作って、fullpageが動く度に、スクロールコンテンツも動かしてあげると、Apple iPhone5のようなパララックス的な感じが作れると思います。
オプション設定が豊富でいろんな用途に使えそうです。
$('#fullpage').fullpage({ verticalCentered: true, resize: true, sectionsColor: [],//['#ccc', '#fff'] anchors:[],//['firstSlide', 'secondSlide'] scrollingSpeed: 700, easing: 'easeInExpo',//default=easeInQuart menu: false, navigation: false, navigationPosition: 'right', navigationColor: '#000', navigationTooltips: [],//['firstSlide', 'secondSlide'] slidesNavigation: true,//default=false slidesNavPosition: 'bottom', controlArrowColor: '#fff',//?? loopBottom: false, loopTop: false, loopHorizontal: true, autoScrolling: true, scrollOverflow: false, css3: false, paddingTop: 0,//'3em' paddingBottom: 0,//'10px' fixedElements: null,//'#element1, .element2'※エレメントにposition:fixedのCSSを追加する normalScrollElements: null,//normalScrollElements: '#element1, .element2',※Mapやセクション内のスクロールさせたいブロックなどの時 keyboardScrolling: true, touchSensitivity: 5, continuousVertical: false, animateAnchor: true, normalScrollElementTouchThreshold: 5,//normalScrollElementTouchThreshold: 5, //events onLeave: function(index, nextIndex, direction){}, afterLoad: function(anchorLink, index){}, afterRender: function(){}, afterResize: function(){}, afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}, onSlideLeave: function(anchorLink, index, slideIndex, direction){} });
※いくつかのプロパティと仕様が変更していたので、アップデートには注意が必要です。
htmlとbodyにoverflow:hiddenが記述されてしまうので、縦のみにしたい場合には、オリジナルのjsを修正する必要あり。
overflowで検索をかけると4つくらいでてくるので、その内のbody指定されている部分をoverflow-y:hiddenにすればOKでした。
これで、bodyにmax-width:1200px;なんかを指定しておくとスクロールバーが出るようになりました。
【参考】iPhone 5s
http://www.apple.com/jp/iphone-5s/