jQueryでマウスホイールの上下イベントを取得 ＋ 余韻をつけたイージングスクロールを実装する実験

最近Webサイト上のUIにおいて、マウスホイールイベントを使って処理する機会が多くあり
その都度「jquery.mousewheel.js」などのプラグインを使って処理していたのですが
jQueryファイルのみでマウスホイール上下イベントの取得方法を掲載している記事を見つけ
自分でもいろいろと試してみたので実験内容と併せて紹介してみます。

jQueryでマウスホイールの上下イベントを取得

今回のjQueryを使ってのマウスホイールのイベント処理は
「Web制作 W3G」さんの記事を参考にさせていただいてます。

【参考記事】ホイール系イベント2014年版クロスブラウザ｜Web制作 W3G

jQueryだけでなくネイティブJavaScriptでの取得方法や
ホイール関連の処理について詳しく紹介されています。

記事によるとjQueryを使ってのマウスホイール処理方法は
以下のようなスクリプト記述で取得可能となります。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
	var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
	$(document).on(mousewheelevent,function(e){
		e.preventDefault();
		var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
		if (delta < 0){
			// マウスホイールを下にスクロールしたときの処理を記載
		} else {
			// マウスホイールを上にスクロールしたときの処理を記載
		}
	});
});
</script>

マウスホイールのスクロールイベントを取得するのは比較的簡単なのですが
上下の動作を判別するのが今ひとつうまくいかなかったので
この方法ならばいろいろ実装できそうな気がしています。

試しにHTML上に数字を入れた適当な要素を配置して

◆HTML
<div class="wheel">1</div>

これをマウスホイールイベントで増減させてみると

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
	var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
	$(document).on(mousewheelevent,function(e){
		var num = parseInt($('.wheel').text());
		e.preventDefault();
		var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
		if (delta < 0){
			var dNum = num - 1;
			$('.wheel').html(dNum)
		} else {
			var uNum = num + 1;
			$('.wheel').html(uNum)
		}
	});
});
</script>

これを実行させると以下のようになります。
※下記の枠内でマウスホイールを上下させてみてください。

「jQueryでマウスホイールの上下イベントを取得」サンプルを別枠で表示

マウスホイールを動かした分だけ画面上の数字が増減します。

このように簡単にマウスホイールの上下イベントで
それぞれ違った処理を加えることが可能になります。

これを応用（？）して
マウスホイールを使ってスクロールした際に
スクロールアニメーションに余韻を残したイージング処理をつける方法を試してみます。

jQueryで余韻をつけたイージングスクロールを実装する実験

まずはサンプルから。
※下記の枠内でマウスホイールを上下させてみてください。

「jQueryで余韻をつけたイージングスクロールを実装する実験」サンプルを別枠で表示

スクロールした際にアニメーションがすぐに止まることなく
少し余韻を残した感じでゆっくりした動きにすることができます。

この動作を実装させるにはHTMLとCSSには特別な指定はありません。

スクリプトの記述は以下のようになります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.easing.js"></script>
<script>
$(function(){
	scrLength = 200;
	scrSpeed = 500;
	scrEasing = 'easeOutCirc';

	var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
	$(document).on(mousewheelevent,function(e){
		e.preventDefault();
		var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
		if (delta < 0){
			scrSet =  $(document).scrollTop()+scrLength;
		} else {
			scrSet =  $(document).scrollTop()-scrLength;
		}
		$('html,body').stop().animate({scrollTop:scrSet},scrSpeed,scrEasing);
		return false;
	});
});
</script>

スクリプト開始部分にある設定値の内容は、以下の様になっています。

これらの設定値を変更することでスクロールスピード等の設定が可能になっています。

マウスホイールのスクロールをした際に
このようなさりげない演出を組み込んでおくと
印象的にサイトを彩ることも可能になるかと思います。

これらのように上からのスクロール処理と、下からのスクロール処理を判別することで
様々な違った演出を実装させることが可能になり
やり方によってはパララックス効果のようなものも
簡単に実装することができるのではないかと思っています。

jQueryでマウスホイールのイベントを使って処理を加える際にぜひ。。。

サンプルファイルをダウンロードしたい方はこちらから