WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

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

最近Webサイト上のUIにおいて、マウスホイールイベントを使って処理する機会が多くあり
その都度「jquery.mousewheel.js」などのプラグインを使って処理していたのですが
jQueryファイルのみでマウスホイール上下イベントの取得方法を掲載している記事を見つけ
自分でもいろいろと試してみたので実験内容と併せて紹介してみます。

jQueryでマウスホイールの上下イベントを取得

今回のjQueryを使ってのマウスホイールのイベント処理は
「Web制作 W3G」さんの記事を参考にさせていただいてます。

【参考記事】ホイール系イベント2014年版クロスブラウザ|Web制作 W3G

jQueryだけでなくネイティブJavaScriptでの取得方法や
ホイール関連の処理について詳しく紹介されています。

記事によるとjQueryを使ってのマウスホイール処理方法は
以下のようなスクリプト記述で取得可能となります。

[javascript]
◆SCRIPT


[/javascript]

マウスホイールのスクロールイベントを取得するのは比較的簡単なのですが
上下の動作を判別するのが今ひとつうまくいかなかったので
この方法ならばいろいろ実装できそうな気がしています。

試しにHTML上に数字を入れた適当な要素を配置して

[html]
◆HTML

1

[/html]

これをマウスホイールイベントで増減させてみると

[javascript]
◆SCRIPT


[/javascript]

これを実行させると以下のようになります。
※下記の枠内でマウスホイールを上下させてみてください。

「jQueryでマウスホイールの上下イベントを取得」サンプルを別枠で表示

マウスホイールを動かした分だけ画面上の数字が増減します。

このように簡単にマウスホイールの上下イベントで
それぞれ違った処理を加えることが可能になります。

これを応用(?)して
マウスホイールを使ってスクロールした際に
スクロールアニメーションに余韻を残したイージング処理をつける方法を試してみます。

jQueryで余韻をつけたイージングスクロールを実装する実験

まずはサンプルから。
※下記の枠内でマウスホイールを上下させてみてください。

「jQueryで余韻をつけたイージングスクロールを実装する実験」サンプルを別枠で表示

スクロールした際にアニメーションがすぐに止まることなく
少し余韻を残した感じでゆっくりした動きにすることができます。

この動作を実装させるにはHTMLとCSSには特別な指定はありません。

スクリプトの記述は以下のようになります。

[javascript]



[/javascript]

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

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

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

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

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

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

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

jQueryでマウスホイールの上下イベントを取得 + 余韻をつけたイージングスクロールを実装する実験」への7件のフィードバック

  • 2014年3月15日 @ 4:41 PM
    パーマリンク

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

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

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

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

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

    返信
  • 2014年3月16日 @ 12:50 PM
    パーマリンク

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

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

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

    返信
  • 2014年3月20日 @ 1:09 PM
    パーマリンク

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

    返信
  • 2014年3月23日 @ 7:26 PM
    パーマリンク

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

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

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

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

    返信
  • ピンバック: 【javascript】マウスホイールで減速するイージングを試してみた | Web.fla

  • ピンバック: 余韻の残るマウスホイール移動と任意の要素への移動

  • ピンバック: 【Webアプリ】おすすめするjQuery(JavaScript)の組み方 - 【保存版】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です