近々、個人的に横スクロールのサイトを作ってみようかなと思っていたので、
その前に、横スクロールだけでも試しておこうと思い、簡単なサイトを作ってみました。

使用するのは、「jquery.mousewheel」というプラグインは、
jQuery Mousewheel | jQuery Plugin Registry
になります。

DEMOサイトは以下からご覧下さい。

DEMO

横スクロールの実装方法は以下になります。

「jquery.mousewheel」の実装方法

まず、プラグインをダウンロードします。
jQuery Mousewheel | jQuery Plugin Registry

そして次に、
head内に以下を読み込みます。

XHTML

<script src="js/jquery.min.js"></script> <script src="js/jquery.mousewheel.js"></script>

1 2	<script src="js/jquery.min.js"></script> <script src="js/jquery.mousewheel.js"></script>

htmlは以下で、

<div id="contents"> <div class="box" id="n01"> <h2>タイトルタイトル1</h2> <p></p> </div> <div class="box" id="n02"> <h2>タイトルタイトル2</h2> <p></p> </div> <div class="box" id="n03"> <h2>タイトルタイトル3</h2> <p></p> </div> <div class="box" id="n04"> <h2>タイトルタイトル4</h2> <p></p> </div> <div class="box" id="n05"> <h2>タイトルタイトル5</h2> <p></p> </div> <!-- /#contents --></div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<div id="contents">           <div class="box" id="n01">             <h2>タイトルタイトル1</h2>             <p></p>         </div>           <div class="box" id="n02">             <h2>タイトルタイトル2</h2>             <p></p>         </div>         <div class="box" id="n03">             <h2>タイトルタイトル3</h2>             <p></p>         </div>         <div class="box" id="n04">             <h2>タイトルタイトル4</h2>             <p></p>         </div>         <div class="box" id="n05">             <h2>タイトルタイトル5</h2>             <p></p>         </div>     <!-- /#contents --></div>

CSSは以下になります。

CSS

#contents { margin: 0 0 0 210px; height: 91%; padding: 3% 3% 5%; z-index: 10; overflow: hidden; } .box { overflow: auto; height:100%; padding: 0 30px 0 10px; float: left; width: 900px; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

#contents { margin: 0 0 0 210px; height: 91%; padding: 3% 3% 5%; z-index: 10; overflow: hidden; } .box { overflow: auto; height:100%; padding: 0 30px 0 10px; float: left; width: 900px; }

#contentsの幅はjavascriptで設定する方がよいので、それは後述します。
各コンテンツの幅は自由に設定してよいかと思います。

そして,javascriptは以下になります。
内容としては、先ほどの#contentsの幅取得と、
横スクロールの実装、
そして、ナビゲーションを押した際に、各コンテンツにスクロールするようにする動き
になります。

JavaScript

<script type="text/javascript"> $(function() { //コンテンツの横サイズ var cont = $('#contents'); var contW = $('.box').outerWidth(true) * $('div',cont ).length; cont.css('width', contW); //スクロールスピード var speed = 30; //マウスホイールで横移動 $('html').mousewheel(function(event, mov) { //ie firefox $(this).scrollLeft($(this).scrollLeft() - mov * speed); //webkit $('body').scrollLeft($('body').scrollLeft() - mov * speed); return false; //縦スクロール不可 }); $('a[href^=#]').click(function() { var speed = 400;// ミリ秒 var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().left; //targetの位置を取得 $('html, body').animate({scrollLeft:position}, speed, 'swing'); return false; }); }); </script>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<script type="text/javascript">     $(function() {         //コンテンツの横サイズ         var cont = $('#contents');         var contW = $('.box').outerWidth(true) * $('div',cont ).length;         cont.css('width', contW);         //スクロールスピード         var speed = 30;         //マウスホイールで横移動         $('html').mousewheel(function(event, mov) {             //ie firefox             $(this).scrollLeft($(this).scrollLeft() - mov * speed);             //webkit             $('body').scrollLeft($('body').scrollLeft() - mov * speed);             return false;   //縦スクロール不可         });        $('a[href^=#]').click(function() {       var speed = 400;// ミリ秒       var href= $(this).attr("href");       var target = $(href == "#" || href == "" ? 'html' : href);       var position = target.offset().left; //targetの位置を取得       $('html, body').animate({scrollLeft:position}, speed, 'swing');       return false;        });     }); </script>

今回はスクロールで縦のスクロールと同じような感覚でスクロールさせていますが、
コンテンツ毎に動くようにもできるようです。

 

サイトによってはこのような表現も良いですね！！

 

 

参考にさせていただいたサイト：
jQueryでマウスホイールで横にスクロールする横型コンテンツ | webOpixel
jQueryで横スクロールのアニメーションするサイトを作る方法 | Webロケッツマガジン