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

ギャラリー系やポートフォリオサイトでよく見かける横スクロールのサイト。
これをJavaScriptライブラリのjQueryで実現するプラグイン「X-Rhyme.js for horizontal websites」を紹介します。
※マウスホイールにも対応

sponsors

使用方法

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;を記述したほうがよさそうです。

サンプル

title

contents

title

contents

title

contents

title

contents

title

contents


Javascriptサンプルページ一覧
skuare.net

sponsors