jQuery 横スクロールページ

Js

作成

http://littlestar.under.jp/slidew/slidew.html

考え方

フロートで横並びさせる
cssでbodyの幅と、ページ単位のブロックの幅を指定する。
ディスプレイよりもブロックの幅は広くとる。

背景にグラデーションかけたら、おもしろいかな？
CSS3にあったはず。

・・イマイチでした。

jquery
$(function() {
$('.pager').bind('click',function(event){
var $anchor = $(this);
$('html, body')
.stop()
.animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 700, 'linear');  // jquery.easing などのプラグインを使うことでイージングを変更できます。
event.preventDefault();
});
});
html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>横スクロールアニメーション</title>
<!--Google AJAX　Libraries API　-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="slidew.js"></script>
<link rel="stylesheet" href="slidew.css">
</head>
<body>
	<div id="a" class="page">
		<ul>
			<li><a href="#a" class="pager">pageA</a></li>
			<li><a href="#b" class="pager">pageB</a></li>
			<li><a href="#c" class="pager">pageC</a></li>
		</ul>
		<div class="content">
			<h1 class="pager">pageA</h1>
		</div>
    </div>
    
	<div id="b" class="page">
			<ul>
			<li><a href="#a" class="pager">pageA</a></li>
			<li><a href="#b" class="pager">pageB</a></li>
			<li><a href="#c" class="pager">pageC</a></li>
		</ul>
	<div class="content">
			<h1 class="pager">pageB</h1>
		</div>
	</div>


	<div id="c" class="page">
		<ul>
			<li><a href="#a" class="pager">pageA</a></li>
			<li><a href="#b" class="pager">pageB</a></li>
			<li><a href="#c" class="pager">pageC</a></li>
		</ul>
	<div class="content">
			<h1 class="pager">pageC</h1>
		</div>
	</div>
</body>
</html>
stylesheet
@charset "UTF-8";
*{
	margin: 0;
	padding: 0;
	}
/*bodyのwidthは"ページ単位のwidth×ページ数"をとる*/
body{
	width: 6000px;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	}
/*ページ単位をfloatさせる*/
.page{
	width: 2000px;
	height: 100%;
	float: left;	
	}
ul{
	width: 1960px;
	height: 40px;
	background: #000;
	padding: 0 0 0 40px;
	}
li{
	display: inline-block;
	margin: 0 10px 0 0;
	padding: 5px 0 0 0;
	color: #fff;
	list-style: none;
	}
li a{
	color: #fff;
	}
h1{
	margin: 0 0 0 40px;
	}
.content{
	margin: 0;
	width: 100%;
	height: 100%;
	}
#a .content{
	background: #eee url(slideimg/kumo.png);
}
#b .content{
	background: #bbb url(slideimg/kumo.png);
}
#c .content{
	background: #888 url(slideimg/kumo.png);
}

参考ブログ
Smooth Vertical or Horizontal Page Scrolling with jQuery
jQueryで横スクロールのアニメーションするサイトを作る方法 | Webロケッツマガジン