skuare.net

Tweet

使用方法
X-Rhyme.js for horizontal websitesからファイル一式をダウンロードします。
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="jquery.xrhyme.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.x_container').xrhyme({
navigationSelector : 'li', //ナビゲーションの要素
wheelSpeed : 0.7, //マウスホイール速度
animationTime : 777, //速度
easing : 'easeOutExpo', //easing
});
});
</script>

次に下記のルールでナビとコンテンツを記述します。
<div>
<!-- ナビ -->
<ul>
<li><a href="#">テキスト</a></li>
<-- 以下個数分 -->
</ul>

<!-- コンテンツ -->
<div class="x_container">
<-- ここから1個分 -->
<div class="x_item">
<h2>title</h2>
<p>contents</p>
</div>
<-- ここまで1個分。以下個数分 -->
</div>
</div>

最後にCSSを記述します。
<style>
.x_wrapper{
overflow: hidden;
}
.x_container{
float: left;
width: 99999px;
display: block;
}
.x_item{
float: left;
display: inline;
}
</style>

※ナビにはposition: fixed;を記述したほうがよさそうです。

横スクロールのサイトを作成できるJavaScript「X-Rhyme.js」サンプル

コメントする

記事作成：2011年6月 1日 14:24