スライド間をいい感じにスクロールするjavascript「jQuery.LocalScroll」

スライドさせるjavascriptは多くありますが、1章1節・・・3章5節というふうに階層が深くなるものには対応していないのがほとんどです。
jQuery.LocalScrollは、多階層に渡るスライド間をいい感じにスクロールします。
jScrollToMin

使用方法
jQuery.LocalScrollからjquery.scrollTo-min.jsとjquery.localscroll-min.jsを、jQueryからjquery.js(v1.2.1)をダウンロードします。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.scrollTo-min.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.localscroll-min.js" type="text/javascript"></script>
<script type="text/javascript">
 jQuery(function( $ ){
  $('#navigation').localScroll({
   target:'#content',
   axis:'xy',
   queue:true,
   speed:1600,
   onBefore:function( e, el, $target ){
    $target.stop().stop();//to avoid queueing animations
    $( '#navigation a.scrolling' ).removeClass('scrolling');      
    $(this).addClass('scrolling').get(0).blur();
   },
   onAfter:function(){
    $('#navigation a.scrolling' ).removeClass('scrolling');
   }
  });
  $('#content li a')
   .filter('.next').bind('click', 'next', move )
   .end()
   .filter('.prev').bind('click', 'prev', move );   
  function move( e ){
   var $target = $(this).parent()[e.data]();
   $('#content').scrollTo( $target, {
    speed:800,
    axis:'x'
   });
   return false;
  };
 });
</script>
<link rel="stylesheet" href="http://yourdomain/jScrollToMin.css" style type="text/css">

上記を記述し、スライドを以下のように作成します。
<!-- ナビゲーション部分 -->
<div id="navigation">
 <ul>
  <li><a href="#section1">1章</a></li>
  <li><a href="#section2">2章</a></li>
  <li><a href="#section3">3章</a></li>
 </ul>
</div>
<!-- スライド部分 -->
<div id="content">
 <div id="section1" class="section">
  <ul>
   <li>
    コンテンツ 1章1節
     <a href="#" class="next">次へ</a>
   </li>
   <li>
    コンテンツ 1章2節
     <a href="#" class="prev"> 前へ</a><a href="#" class="next">次へ</a>
   </li>
  </ul>
 </div>
 <div id="section2" class="section">
  <ul>
   <li>
    コンテンツ 2章1節
     <a href="#" class="next">次へ</a>
   </li>
   <li>
    コンテンツ 2章2節
     <a href="#" class="prev"> 前へ</a><a href="#" class="next">次へ</a>
   </li>
  </ul>
 </div>
</div>

スライド間をいい感じにスクロールするjavascript「jQuery.LocalScroll」サンプル

sponsors

「スライド間をいい感じにスクロールするjavascript「jQuery.LocalScroll」」をシェアする

記事作成:
記事URL:

TOP > > > スライド間をいい感じにスクロールするjavascript「jQuery.LocalScroll」