WEBOPIXEL

jQueryでマウスホイールすると余韻が残るイージングスクロールをつくる

Posted: 2011.08.10 / Category: javascript / Tag: ,

通常はマウスホイールでのスクロールするとピタッと止まりますが、止まるときに余韻が残ったりするとなんだかリッチな感じがしますよね。
ということでjQueryで、その動きを作ってみました。

Sponsored Link

demo

プラグインのダウンロード

jQueryはもちろんのことですが、ここではマウスホイールを検出するために「MOUSE WHEEL EXTENSION」と、かっこよくスクロールするために「jquery.easie.js」というプラグインを使用します。

MOUSE WHEEL EXTENSION
jquery.easie.js

javascript

javascriptのコードは以下のようになります。

javascript

	<script type="text/javascript" src="jquery1.5.1.js"></script>
	<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
	<script type="text/javascript" src="jquery.easie.js"></script>
	<script type="text/javascript">
	$(function() {
		var scrolly = 0;
		var speed = 500;
		$('html').mousewheel(function(event, mov) {
			if(jQuery.browser.webkit){
				if (mov > 0) scrolly =  $('body').scrollTop() - speed;
				else if (mov < 0) scrolly =  $('body').scrollTop() + speed;
			} else {
				if (mov > 0) scrolly =  $('html').scrollTop() - speed;
				else if (mov < 0) scrolly =  $('html').scrollTop() + speed;
			}
			$('html,body')
				.stop()
				.animate({scrollTop: scrolly}, 'slow',$.easie(0,0,0,1));
				//イージングプラグイン使わない場合
				//.animate({ scrollTop: scrolly }, 'normal');
			return false;
		});
	});
	</script>
	

「mousewheel」の中にマウスホイールしたときの処理を記述します。
「mov」でスクロール方向を取得できますので、0以上か以下で分岐させればいいんですね。
あまり上手いやり方ではないと思いますが、Webkit系のブラウザではbodyを、その他のブラウザではhtmlをスクロールさせないといけないので処理が2つになっております。
speedという変数でスピード(というか移動量)が調節できます。

COMMENTS

take30 2014-03-05 12:35 

DEMOのjquery.min.js を
jquery-1.10.2.js や jquery-2.1.0.min.js など
別のものに変えると動かなくなるのですがなぜなんでしょうか?

webOpixel 2014-03-12 10:18 

jQueryのバージョンが変わると使用できなくなるメソッドや書き方が変わったりする場合があります。
特に2からはIEの古いバージョンがばっさりサポートされなくなりましたね。

kt 2014-05-07 13:10 

このようなスクロールを探しておりました…!
こちらのコードを利用させていただきたく思うのですが、商用利用の際のライセンスはどのようになっているのでしょうか?
ABOUTページなどを拝見させて頂きましたが、記述が見受けられなかったのでお聞きしました。
お忙しいところお手数をおかけして恐縮ですが、ご回答の程よろしくお願い致します。

webOpixel 2014-05-08 11:40 

わざわざご連絡ありがとうございます。
簡単なものなので自由に使って頂いて大丈夫です。

ATSUSHI 2015-11-30 16:14 

スクロールで余韻ができるもの探していました!
今回は、縦スクロールですが、いまっぽい感じのワンページデザインで、ある一部分だけを横スクロールに対応させて、複数の画像を表示するような事は可能でしょうか?
HTMLとCSSをなんとなく習得したレベルで、jacva scriptの知識がありません。。。
可能な範囲でご回答をお願いいたします。

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。