大卒後、PR会社にてPR誌の取材・編集・デザインからPRコンサルティング、調査分析まで幅広い業務に携わる。
2007年6月から「skuare.net」を開始。その後、ホームページ制作会社に転職し、WEBサイト制作に本格的に従事。
関わった主なサービス：
ホロヨッター
遅延なう
ピーチク
Yahoo!による「東北地方太平洋沖地震」インターネット募金はこちら
最近ポートフォリオサイトなどで、横スクロールで印象的なデザインがあります。
これを実現するため、jQueryを使ってみましょう。
via：Smooth Vertical or Horizontal Page Scrolling with jQuery
copyright skuare.net all rights reserved.
使用方法
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サンプル
記事作成：2010年06月03日
戻るcopyright skuare.net all rights reserved.
