最近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>

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

scrLength = 200 マウスホイール動作一回に対してスクロールする距離
scrSpeed = 500 上の「scrLength」で設定した距離をアニメーションする時間
scrEasing = ‘easeOutCirc’ スクロールアニメーションする際のイージング処理

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

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

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

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

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

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (7)

  • saguzi | 2014.03.15 16:41

    こんにちは、たまにこのサイトにお世話になっている者です。

    簡潔に言いますとこのスクリプトは「やめてもらいたい」です。
    理由は2つ。

    まず1つめは「スクロールがしにくい」こと。
    これは再現しようが無いですがすごくスクロールしにくいです。
    狙った場所に止めることが出来ません。見たい場所が通り過ぎてしまいます。

    もう1つは「左(もしくは右)スライドによるページ移動が機能しない」こと。
    これは私がMagic Mouseを使っている所為なんですが、
    前のページに戻るのにわざわざ戻るボタンを押さないといけないのはこのマウスの意味が成しません。

    以上の理由でこのスクリプトの使用を中止して頂きたい所存です。
    突然ですが失礼します。

  • BlackFlag | 2014.03.16 12:50

    >saguziさん
    ご指摘ありがとうございます。

    自分でも実際にこのブログに組み込んでみて
    読み物系のページではこの動作は微妙だな…と思いつつ
    自分が飽きるまではそのままにしておこう、と放っておいたところでした。

    動作は削除しました。
    今後とも何卒宜しくお願い致します。

  • ペペ | 2014.03.20 13:09

    いつも拝見させていただいております。
    こちらですが、指定のdiv要素などのスクロールにも応用可能なんでしょうか。。
    横スクロールバーをカスタマイズして動作させようと思っているのですが。。。

  • BlackFlag | 2014.03.23 19:26

    >ペペさん
    コメントありがとうございます。
    このスクロールイベントスクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただきましたブロック要素に対して
    スクロールイベントを実行させる件についてですが
    スクリプト6,14,16行目にある「$(document)」と18行目にある「$(‘html,body’)」を
    「$(‘#○○○○’)」といった任意のIDもしくはクラスの付いた
    ブロック要素に変更することで可能かと思います。(divなどのタグ名でも可)

    参考までにサンプルファイルも用意しましたので
    必要があれば下記よりダウンロードしてみてください。
    http://black-flag.net/devel/jQueryMouseWheelEvent/jQueryMouseWheelEventContents.zip

    お試しください。
    よろしくお願いします。

  • 【javascript】マウスホイールで減速するイージングを試してみた | Web.fla | 2015.02.19 17:36

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

  • 余韻の残るマウスホイール移動と任意の要素への移動 | 2015.03.05 7:37

    [...] 、スイーンと余韻の残る動きを付けたかったので、jQueryでマウスホイールの上下イベントを取得 + 余韻をつけたイージングスクロールを実装する実験の記事を参考にさせて頂きました。 [...]

  • 【Webアプリ】おすすめするjQuery(JavaScript)の組み方 - 【保存版】 | 2015.03.12 9:55

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







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR