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で検索をかけると４つくらいでてくるので、その内のbody指定されている部分をoverflow-y:hiddenにすればOKでした。
これで、bodyにmax-width:1200px;なんかを指定しておくとスクロールバーが出るようになりました。
【参考】iPhone 5s
http://www.apple.com/jp/iphone-5s/