【jQuery】横型コンテンツをイージースクロール【マウスホイール】

ｊQueryを使って横スクロール

課題サイトで実装したスクロールに関するスクリプトまとめメモ。解説ではないです。

1. マウスホイールのスクロール方向を横に（プラグイン：「jquery.mousewheel.js」使用）
2. アンカーリンクをイージースクロールさせる（プラグイン：「jquery.easie.js」使用）
3. スクロールを余韻を残す動作に変更（上二つのプラグイン併用）

1.マウスホイールのスクロール方向を横にする

二つ前の記事にも記載しましたが、こちらのページを参考にさせていただきました。
プラグイン「jquery.mousewheel.js」を使ってマウスホイールの動作を検知してホイールを上に回した時の処理、下に回した時の処理をそれぞれ設定。

特定の要素上（たとえばテキストエリア上とか）では横スクロールではなく縦スクロールにホイールの挙動を戻したいのを考え中。
（unbindメソッドとか使えばいいのかな？）

2.アンカーリンクをイージースクロールさせる

ページ内リンクをパッと切り替えのように一瞬で飛ぶのではなく、アニメーションでスクロールさせる。
その際、アニメーションの速度や加速を調整するイージング処理を指定できる。jQueryの初期状態ではイージングの種類は「linear」と「swing」しかない。
そこでプラグイン「jquery.easie.js」で様々なイージング処理を追加できる。使い方はhtmlで「jquery.easie.js」を読み込んでおき、アニメーションメソッドのイージング処理指定の部分にプラグインで定義されているイージング処理名をしていするだけ。
イージング処理の種類に関してはこちらのサイトが非常にわかりやすいデモ付きで解説されています。

$(function(){
　　$('クリックさせる要素').click(function(){
　　　　$('スクロールさせる要素（bodyなど）').animate({scrollLeft:'0px'},1000,'easieEaseInCubic');
　　　　//.animate({スクロール方向：スクロールをする目的地の数値},スピード,’イージング処理名’)
　　　　return false;
　　})
});

スクロール方向は縦方向ならscrollTop、横方向ならscrollLeftを使用します。いずれもキャメルケースで表記。
スクロールする位置はpositionのtopとleftのようなもの。ピクセル指定。
これはclickした時にanimateメソッドを呼び出し指定した位置までスクロールさせる。
htmlでは通常のアンカーリンクを施しているので、ユーザーがjavascriptを許可しなくても、アンカーリンク自体は動作する。
 

3.スクロールの動作を余韻を残す動作に変更する

これもこちらのページを参考に。
リンク先のページのコードは縦スクロール用なので、scrollTopをscrollLeftに書き換え。

--------------------------------------------------------------------------------
プラグインや公開してくださっている方のコードを使うとなかなかさくっとはいきませんね。
人のコードを読み解きながら実装させていくのは勉強になります。