マウスウィールでも横スクロールするjavascript「horizontinyscrolling.js」

横スクロールのjavascriptでは、bookreadeer.jsなるものが人気です。
たった6行でWebサイトのUIをガラッと変えるとか・・・
が、javascriptをoffにすると縦になっちゃいますし、そもそもスクロール時に矢印を利用する人は多いのでしょうか?
今回紹介するhorizontinyscrolling.jsはマウスに付いている「ぐるぐる」のマウスウィールでスクロール可能です。
これにより、縦スクロールと同じ感覚でページ送りができます。
もちろんjavascriptがoffでも横スクロールOK

使用方法
【STEP 1】Javascriptをダウンロード
とりあえずjavascriptがなければ始まりません。
horizontinyscrolling.jsからとってきましょう。
そして埋め込みます。
<script src="http://yourdomain/horizontinyscrolling.js" type="text/javascript"></script>
【STEP 2】CSSを設定しましょう
ひとつのコラムの横幅を決め、ページ数をかけたものを全体の横幅にします。
<style type="text/css">
#container {width: 3500px; height: 509px;} //ページ数かける1ページあたりの横幅(margin,padding含む)
.par {width: 500px; height: 500px; float: left; margin: 0px 30px 0 0;padding-left:30px;} //横幅500px
</style>

【STEP 3】HTMLを書きましょう
<div id="container">
 <div id="index" class="par">
  1枚目
 </div>
 <div id="second" class="par">
  2枚目
 </div>
  枚数分
</div>

【STEP 4】リンクを張る
目次に各ページへのリンクを張ります。
<a href="#first">STEP 1</a>
<a href="#second">STEP 2</a>
<a href="#third">STEP 3</a>
<a href="#fourth">STEP 4</a>
<a href="#fifth">STEP 5</a>

<戻る用>
<a href="#index">←トップに戻る</a>
【STEP 5】出来上がりを見ましょう
これで完成です。
マウスウィールでも横スクロールするjavascript「horizontinyscrolling.js」サンプル

sponsors

「マウスウィールでも横スクロールするjavascript「horizontinyscrolling.js」」をシェアする

記事作成:
記事URL:

TOP > > > マウスウィールでも横スクロールするjavascript「horizontinyscrolling.js」

前の記事:
次の記事:faviconを表示しているサイト