Smooth Vertical or Horizontal Page Scrolling with jQuery

他のサイトと差をつけて、サイトを横スクロールで作成したいときに便利なjQueryプラグインです。印象的かつスムーズに横スクロールします。

まずはサンプルをご覧ください。

→ Smooth Vertical or Horizontal Page Scrolling with jQueryプラグインサンプル


【設定方法】
Smooth Vertical or Horizontal Page Scrolling with jQuery
からファイルを一式ダウンロードします。

<body>部分にスクロールさせたいセクションごとに<div>でくくります。
サンプルでは3セッションに分けています。

<div id=”section1″>
<h2>Section 1</h2>
<p>
“Your time is limited, so don’t waste it living someone else’s life. Don’t be trapped by dogma – which is living with the results of other people’s thinking.
</p>
<ul>
<li>1</li>
<li><a href=”#section2″>2</a></li>
<li><a href=”#section3″>3</a></li>
</ul>
</div>

<div id=”section2″>
<h2>Section 2</h2>
<p>
Don’t let the noise of other’s opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition.
</p>
<ul>
<li><a href=”#section1″>1</a></li>
<li>2</li>
<li><a href=”#section3″>3</a></li>
</ul>
</div>

<div id=”section3″>
<h2>Section 3</h2>
<p>
They somehow already know what you truly want to become. Everything else is secondary.” — Steve Jobs
</p>
<ul>
<li><a href=”#section1″>1</a></li>
<li><a href=”#section2″>2</a></li>
<li>3</li>
</ul>
</div>

続いて、</body>の直前にスクリプトを設定します。

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<script type=”text/javascript” src=”jquery.easing.1.3.js”></script>
<script type=”text/javascript”>
$(function() {
$(‘ul.nav a’).bind(‘click’,function(event){
var $anchor = $(this);

$(‘html, body’).stop().animate({
scrollLeft: $($anchor.attr(‘href’)).offset().left
}, 1000);
event.preventDefault();
});
});
</script>

最後にcssの記述を変更します。cssのbody幅を(サンプルではwidth:12000pxの部分)をセクション幅(サンプルではwidth:4000px)の枚数分の値に変更します。

body{
width:12000px;
position:absolute;
top:0px;
left:0px;
bottom:0px;
}
.section{
margin:0px;
bottom:0px;
width:4000px;
float:left;
height:100%;
}

セクションの右側に背景画像を入れます。
.black{
color:#fff;
background:#000 url(../images/black.jpg) no-repeat top right;
}
.white{
color:#000;
background:#fff url(../images/white.jpg) no-repeat top right;
}

画像を変更することで印象的な演出を作ることができます。背景画像をいろいろ試してみても楽しいですね。

以下、サンプルのHTMLソースになります。ご参考まで。

この記事と関連してると思われる記事: