お手軽イージングスクロール! / カワズの唄

スポンサーサイト

            
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

お手軽イージングスクロール!

            
Category : WEBデザイン
以前の記事で、ページスクロールをヌルヌルっとイージングさせる「jQuery.nicescroll」を紹介しましたが、あれはスクロールの動きだけでなく、スクロールバーまでもカスタムしてしまうものでした。

その後、鋭意制作中の蛙堂サイトで使用しようとしたら、どうもレスポンシブレイアウトとの相性が悪いのか、スクロールバーが、ものの見事にバグいです。

こりゃいかん、あきらめるか。
いや、スクロールをヌルッとさせるだけのものなら大丈夫のはず!

というわけで、血眼になって探しまわってみたところ、こちらのサイトで素晴らしいjQueryを発見したのです。
『マウスホイールすると余韻が残るイージングスクロール』だそうで、『余韻が残る』とは実に上品な表現ですね。
ヌルッと』とは大違いです。

作者さんのデモページ


使用方法ですが、まずは当然jQuery本体を読み込みます。
それから、jquery.mousewheel.jsjquery.easie.jsを入手して読み込んで下さい。

※jquery.mousewheel.jsは、リンク先でのダウンロード方法がやたらと判りにくいので、
 内緒でこちらに置いときます。右クリでダウンロードして下さい。


ここまではこんな感じです。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="jquery.easie.js"></script>


それから、先ほどのリンク先の作者さんが考案したjQueryを記述します。

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


各部の説明は作者さんに任せるとして、上記丸写しで動きます。
作業はこれだけです。なんて簡単なのかしら!
みなさんもこれ丸写しで、お手軽イージングスクロールを実現させてやって下さい!

…それにしても、下の16行目「イージングプラグイン使わない場合」って、使わないんだったら何のためにこんな事やってるんだろう??
関連記事
スポンサーサイト

コメント

[コメント記入欄はこちら]

コメントの投稿

非公開コメント

FC2Ad

カークランド

Back to Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。