お手軽に横スクロールさせるjQueryチュートリアル via:Smooth Vertical or Horizontal Page Scrolling with jQuery

最近ポートフォリオサイトなどで、横スクロールで印象的なデザインがあります。
これを実現するため、jQueryを使ってみましょう。
via:Smooth Vertical or Horizontal Page Scrolling with jQuery
お手軽に横スクロールさせるjQueryチュートリアル via:Smooth Vertical or Horizontal Page Scrolling with jQueryサンプル

使用方法
Smooth Vertical or Horizontal Page Scrolling with jQueryからファイルをダウンロードします。
<script type="text/javascript" src="jquery-1.4.2.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
}, 1500,'easeInOutExpo'); //easeInOutExpoはeasingプラグインから選べます
event.preventDefault();
});
});
</script>

次にスクロールさせたいセクションごとにdivをくくっていきます。 <div class="section black" id="section1">
<p>セクションテキスト</p>
<!-- ナビゲーション -->
<ul class="nav">
<li>1</li>
<li><a href="#section2">2</a></li>
<li><a href="#section3">3</a></li>
</ul>
</div>

最後にCSSを記述します。
ポイントは、body幅をセクション幅の枚数分にすることと、高さを100%にする点です。
またサンプルのようにセクション右端に背景画像を配置すると印象的になります。
body{width:12000px;position:absolute;top:0px;left:0px; bottom:0px;}
.section{ margin:0px;bottom:0px;width:4000px;float:left;height:100%;}

お手軽に横スクロールさせるjQueryチュートリアル via:Smooth Vertical or Horizontal Page Scrolling with jQueryサンプル

sponsors

「お手軽に横スクロールさせるjQueryチュートリアル via:Smooth Vertical or Horizontal Page Scrolling with jQuery」をシェアする

記事作成:
記事URL:

TOP > > > お手軽に横スクロールさせるjQueryチュートリアル via:Smooth Vertical or Horizontal Page Scrolling with jQuery