jquery.easie.jsを利用しスクロールの余韻を残す

現状最新版のFireFoxで見られるような、画面のスクロール動作でちょっとした余韻を残すアクションを加えてみたい時には、jquery.easie.jsを使って実現が出来ます。

デモサンプル

1.jQuery本体とjquery.easie.js、mousewheel.jsを読み込む

▼jQuery本体

jQuery本体のバージョンによって動作しないことがあります。サンプルではGoogleCDNの「1.6.4」バージョンで動作確認しています。

▼jquery.easie.jsをダウンロード

jquery.easie.js

▼jQuery.mousewheel.jsをダウンロード

jQuery Mousewheel

2.HTMLを記述

高さをある程度取りたいので、画像を6枚並べています。

<section>
	<h3>Section 01</h3>
	<p><img src="images/01.jpg" width="100%" /></p>
</section>

<section>
	<h3>Section 02</h3>
	<p><img src="images/02.jpg" width="100%" /></p>
</section>

<section>
	<h3>Section 03</h3>
	<p><img src="images/03.jpg" width="100%" /></p>
</section>

<section>
	<h3>Section 04</h3>
	<p><img src="images/04.jpg" width="100%" /></p>
</section>

<section>
	<h3>Section 05</h3>
	<p><img src="images/05.jpg" width="100%" /></p>
</section>

<section>
	<h3>Section 06</h3>
	<p><img src="images/06.jpg" width="100%" /></p>
</section>

<h3>Section 01</h3>

</section>

<h3>Section 02</h3>

</section>

<h3>Section 03</h3>

</section>

<h3>Section 04</h3>

</section>

<h3>Section 05</h3>

</section>

<h3>Section 06</h3>

</section>

3.JavaScriptを記述

<script type="text/javascript">
$(function() {
	var scrolls = 0;
	var speed = 700;
	$('html').mousewheel(function(event, move) {
		if(jQuery.browser.webkit){
			if (move > 0) scrolls =  $('body').scrollTop() - speed;
			else if (move < 0) scrolls =  $('body').scrollTop() + speed;
		} else {
			if (move > 0) scrolls =  $('html').scrollTop() - speed;
			else if (move < 0) scrolls =  $('html').scrollTop() + speed;
		}
		$('html,body')
			.stop()
			.animate({scrollTop: scrolls}, 'slow',$.easie(0,0,0,1));
			//イージングプラグイン使わないとき
			//.animate({ scrollTop: scrolls }, 'normal');
		return false;
	});
});
</script>

$(function() {

var scrolls = 0;

var speed = 700;

$('html').mousewheel(function(event, move) {

if(jQuery.browser.webkit){

if (move > 0) scrolls = $('body').scrollTop() - speed;

else if (move < 0) scrolls = $('body').scrollTop() + speed;

} else {

if (move > 0) scrolls = $('html').scrollTop() - speed;

else if (move < 0) scrolls = $('html').scrollTop() + speed;

}

$('html,body')

.stop()

.animate({scrollTop: scrolls}, 'slow',$.easie(0,0,0,1));

//イージングプラグイン使わないとき

//.animate({ scrollTop: scrolls }, 'normal');

return false;

});

</script>

変数speedの値を変更することでスピードの調整が可能です。

FireFoxユーザーにとっては既に備わっている動きなので特別必要がないかもしれませんが、そのほかのブラウザにおいて、ちょっとした動きに抑揚をつけたい場合などには効果的かもしれません。