Posted: 2011.07.21 / Category: javascript / Tag: jQuery, アニメーション 通常のWebサイトは縦長でマウスホイールで下に移動していきますが、最近よく見かけるようになった横長タイプのコンテンツをjQueryを使用して作成する方法をご紹介します。 機能としてはマウスホイールで横に移動と、ナビゲーションボタンをクリックで指定位置までスライドするということをやってみます。 html+css htmlはナビゲーションであるリストとコンテンツを入れるためのdivが5つあります。 html <div id="contents"> <ul id="nav"> <li><a href="#s01">01</a></li> <li><a href="#s02">02</a></li> <li><a href="#s03">03</a></li> <li>
![jQueryでマウスホイールで横にスクロールする横型コンテンツ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4a3a2973dd7939605d3daca5f8858bbc32b103b0/height=288;version=1;width=512/https%3A%2F%2Fwww.webopixel.net%2Fimg%2Fog.png)