web制作 | skygoldマウスホイールでスクロールすると、余韻が残るイージングスクロールJquery

通常、ブラウザ上でwebサイトをマウスホイールでスクロールをするとホイールを止めた時にピタッと止まりますが、止まるときに余韻が残ったりするほうが少しリッチな感じがすると思います。jQueryで動作する方法があるので、覚え書き。

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

jqueryのダウンロード・読み込みは基本ですが、その他の必要なプラグインを下記からダウンロードします。

そして、下記のようにJavascriptの記述をします。


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.easie.js"></script>
<script type="text/javascript">
$(function() {
	var scrolly = 0;
	var speed = 400;
	$('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>

$(function() {

var scrolly = 0;

var speed = 400;

$('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>

→DEMO

「var speed = 400;」の数字を変更すると、速度を変更できます。とっても簡単なので、是非試してみてください。

13.09.14　|　WEBデザイン制作・IT関連 KEiSoN★

WORDPRESSの投稿エディタのボタン部分をカスタマイズして作業を効率化しよう！「Add Quick tag」

The road not taken（選ぶもののない道）

この記事を書いた人

KEiSoN★ > facebook

スカイゴールド株式会社　代表取締役 / クリエイティブディレクター/webデザイナー

2009年1月よりフリーランスのディレクター/Webデザイナーとして活動しながら、ノマドな働き方を試み始める。
過去16カ国ほど訪れ、一眼レフにその景色を収めながら時々ドローンも飛ばす。2015年11月にスカイゴールド株式会社として法人化。
現在は主に東京を中心にしながら、タイ・バンコクを年間4,5回ほど往復しながら活動中。
Wordpressを使用したオリジナルデザイン制作・オウンドメディア構築を得意とする。
国内外の様々な価値観・デザインに接触することで幅広いクリエイティブや臨機応変にアイデアを提供する。
最近は、Shopify制作の勉強も行なっている。