縦スクロールアクションで横スクロールをしてくれる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。
これをしないとスタイルシートで指定した値を読み取り
それがウィンドウサイズより大きければマイナス、小さければプラスにずれて行くため
意図した動きにはならないです。
ご注意を