Blog

横スクロールを可能にできる「jquery.mousewheel」を使用してみた

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

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

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

 

DEMO

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

 

「jquery.mousewheel」の実装方法

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

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

htmlは以下で、

CSSは以下になります。

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

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

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

 

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

 

 

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

Author Profile

Y.A
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ