縦スクロールアクションで横スクロールをしてくれるjQueryのライブラリjInvertScrollについて
言葉で説明するより実物を、と言う事であの有名な兄弟レーサーのページ
http://www.nintendo.com.au/gamesites/mariokartwii/

これについて、下記の条件を加えるカスタマイズをしました。
『各コンテンツ(1枚の表示)はウィンドウサイズに揃える』
これを実現するために、ダウンロードしたファイル群の中にあるサンプルをカスタマイズ。
ステップとしては
1.現在のWindowサイズを取得する
2.frontクラスの幅をWindowサイズの5倍に指定(ページが5枚あるため)
3.pageクラスの幅をWindowサイズに指定
4.各ページクラスを段階的にWindowサイズを加算してゆく
5.これらをリサイズ毎に実行する
簡単に言えば、全体幅と各ページの横幅を動的に変えてしまおうとしたわけです。
理由は上記の兄弟レーサーページでもそうですが、ミラクルフィットしていないため
横幅が広いと、次のページが見えてしまうため。

気にしなきゃ良いんですが、どうしても次のページが見えてしまうのを避けたいケースもあり。
上記のステップをソースにすると
$(document).ready(function()
{
set_pagesize();
window.onresize = function onResize(){set_pagesize()}; // ・・・5
function set_pagesize()
{
// ページ幅(スクロールバー抜き)
window_width = $('html').prop('clientWidth'); // ・・・1
// frontクラスの横幅を指定
var total_width = window_width * 5;
$('.front').css('width', total_width+'px'); // ・・・2
// 5ページ全ての横幅指定
$('.page').css('width', window_width); // ・・・3
//$('.scroll').css('width', window_width); // ・・・3(こっちが正解かもだが)
// 2ページ目
var width = window_width;
$('.description').css('left', width+'px'); // ・・・4
// 3ページ目
width += window_width;
$('.documentation').css('left', width+'px'); // ・・・4
// 4ページ目
width += window_width;
$('.options').css('left', width+'px'); // ・・・4
// 5ページ目
width += window_width;
$('.download').css( 'left', width+'px'); // ・・・4
}
});
これでOK
※その他のHTMLやCSSはサンプルを参考にしてください。
で、ここで要注意なのは、jInvertScrollの発火タイミング。
jQuery系には良くある話ですが、可変値に応じて再発火しないとダメです。
具体的には、上記サンプルの32行目の後に
var scroll_speed = window_width * 3;
$.jInvertScroll(['.scroll'],
{
height: scroll_speed,
onScroll: function(percent)
{
console.log(percent);
}
});
を入れればOK。
これをしないとスタイルシートで指定した値を読み取り
それがウィンドウサイズより大きければマイナス、小さければプラスにずれて行くため
意図した動きにはならないです。
ご注意を


