今回は scroll の挙動調整です。
具体的には、通常 scroll した場合に縦方向 scroll する処理を
横向きに scroll するように変更してしまおうと云うものです。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="./jquery.mousewheel.min_.js"></script>
<script type="text/javascript"><!--
$(function(){
var scrollTop = 0;
var baseSpeed = 1000;
var tempSpeed = 0;
var userAgent = window.navigator.userAgent.toLowerCase();
$('html').mousewheel(function(event, move) {
// scroll type
if (move > 0) {
tempSpeed = (baseSpeed * -1);
} else if (move < 0) {
tempSpeed = baseSpeed;
}
// userAgent check (chrome)
if(userAgent.indexOf('chrome') != -1){
scrollLeft = $('body').scrollLeft() + tempSpeed;
} else {
scrollLeft = $('html').scrollLeft() + tempSpeed;
}
// scroll set
$('html,body').stop().animate({scrollLeft: scrollLeft}, 'normal');
// scroll out
return false;
});
});
--></script>
<link rel="stylesheet" href="reset.css" type="text/css">
<style type="text/css"><!--
div {
margin : 10px;
}
#main_area div {
float : left;
}
#scroll_area {
width : 4500px;
}
--></style>
</head>
<body>
<div id="main_area">
<div id="scroll_area">
<div class="thumb_div"><img src="./icon_jpeg01.jpg"></div>
<div class="thumb_div"><img src="./icon_jpeg02.jpg"></div>
<div class="thumb_div"><img src="./icon_jpeg03.jpg"></div>
<div class="thumb_div"><img src="./icon_jpeg04.jpg"></div>
<div class="thumb_div"><img src="./icon_jpeg05.jpg"></div>
<div class="thumb_div"><img src="./icon_jpeg07.jpg"></div>
<div class="thumb_div"><img src="./icon_jpeg08.jpg"></div>
<div class="thumb_div"><img src="./icon_jpeg09.jpg"></div>
<div class="thumb_div"><img src="./icon_jpeg10.jpg"></div>
<div class="thumb_div"><img src="./icon_jpeg11.jpg"></div>
<div class="thumb_div"><img src="./icon_jpeg12.jpg"></div>
<div class="thumb_div"><img src="./icon_jpeg13.jpg"></div>
<div class="thumb_div"><img src="./icon_jpeg14.jpg"></div>
<div class="thumb_div"><img src="./icon_jpeg15.jpg"></div>
<div class="thumb_div"><img src="./icon_jpeg17.jpg"></div>
<div class="thumb_div"><img src="./icon_jpeg18.jpg"></div>
<div class="thumb_div"><img src="./icon_jpeg19.jpg"></div>
<div class="thumb_div"><img src="./icon_jpeg20.jpg"></div>
</div>
</div>
</body>
</html>
sample を開き scroll してみると横に scroll して動くかと思います。
※ 内容自体は以前に行った内容とあまり変わりません（笑）
最近は、今までのような page が縦に scroll するだけでは無い site が増えています。
通常とは異なり、scroll をこちらで制御できるため、画面内容によって scroll の
移動距離を変えるなど、ちょっと変わった印象を持たせることも可能かと思います。
scroll bar を非表示にすることで scroll による紙芝居のような表示をすることが
可能になるのかと思います。
これでちょっと変わった印象を持たせられるのでは無いでしょうか。