Web.fla

主食は、html/css/php/javascript(jQuery) デザートはactionscript!WEBに関することをメモってくサイト

*

【javascript】マウスホイールで減速するイージングを試してみた

      2015/02/19

マウスホイールで減速するイージングを試してみた

ちょっとjavascriptとjqueryを使って、マウスホイールのイベント(mousewheel)でイージングをやってみたいと思ったのでメモ。
jqueryのイージングのプラグインを使えばすぐ出来そうですが今回は使わないでおきます。

やってみたいこと

マウスホイールの操作でdiv要素で作ったボックスを左右に移動するアニメーションをさせて、ホイールをやめてもいきなり停止せずに余韻で減速するイージングを表現させる。

今回の記事の内容とは関係ないが、ウィンドウの幅を超えたら反対側から出てくる処理をしています。(笑)
とりあえず全部のプログラムを載せておきます。

全部を説明すると長くなるので、よいしょよいしょ説明していこうかと思います。

マウスホイールのイベント時の処理

マウスホイールさせたときに発生するイベント「mousewheel」のt時の処理を説明してみます。

マウスホイールの移動量を取得する

まずマウスホイールが上に回されてたのか、下に回されたのかのマウスホイールの移動量を判別する必要があるのですが、それはマウスホイールイベントのイベントオブジェクトの「wheelDelta」プロパティで確認できます。

ちなみに、google chromeだと上に回すと「120」で下に回すと「-120」という数値になります。

移動の方向と加速度を決める

マウスホイールの移動量を調べたら、その数値を元にどの方向に移動されるか?といった速度の方向と加速度を設定します。

if文を使って、移動量が0以下の場合は「1.5」の数値分を変数velocityに加算させていき、0以上の場合は、減算させていきます。
ここの数値によって加速度が決まるので、もっとスピードを早くしたい場合は、ここの数値をもう少し上げるといいです。

setIntervalでアニメーションをさせる

マウスホイールのイベント発生時にボックスを移動するためのアニメーションを設定しないといけないので、startAnimeという関数をマウスホイール時に発生させます。

startAnime関数は、変数timerがnull以外のときにsetinterval関数でeasingFunc関数を1/60秒ごとに実行する仕組みを設定しています。

アニメーションさせる関数の処理

easingFunc関数でボックスのアニメーションと減速させたり、ボックスをアニメーションさせる処理などを記述する。

摩擦をかけることで減速させる

最初のマウスホイールのmousewheelイベント時に変数velocityに加算と減算をさせましたが、それと同時にsetIntevalでアニメーションが実行されているので、変数velocityに変数frictionで0.9の摩擦をかけつづけることにより減速する仕組みなります。

ボックスの位置を取得してcssで移動させる

ボックスをアニメーションさせるには、リアルタイムにボックスの位置を取得する必要があるのでjQueryのoffset関数のleftプロパティで位置を取得します。

現在のボックスの位置を取得したら、jQueryのCSSの設定で現在の位置に加算させた変数velocityを足すことでボックスがアニメーションします。

この設定により、setIntervalでボックスの位置が常に更新されアニメーションしつつ、変数frictionで摩擦をかけてるので減速していくようになる。

アニメーションを止める

ボックスのアニメーションでイージングで減速させていくと必ずボックスは止まるので、setIntervalも止めないといけないのでstopAnime関数を実行します。

stopAnime関数自体はclearIntervalでアニメーションを解除している処理のみになります。

この処理をどのタイミングで実行するかなんですが、変数velocityの数値で、0.09以下になったときと-0.09以上になった時に実行させます。この数値はあくまで目安です。

サンプルでは、確認用に変数velocityの値を表示させているので、それを目安に数値を決めてもいいと思いますが、0.09でも0.07でもあまり替わらないと思います。(笑)

ウィンドウの幅を超えたら反対側から出てくる処理

これも、よくある処理だと思いますが、いたって簡単です。

両再度の幅の位置を取得

まずは、右側の位置ですが、これはウィンドウの幅になるので、width()で取得できます。左側の位置ですが、左端はもちろん位置は0になるのですが、0を基準とるすと急にボックスが移動することになってしまうので、基準を0からボックスの幅を引いた値を基準とします。これは、ボックスの位置の基準点が左上が基準値となっているためです。

反対側から表示させる仕組み

両再度の反対側から表示させる仕組みは、常にボックスの位置を監視していないといけないので、setIntervalで実行しているeasingFunc関数内に記述します。

if文を使って、両サイドの壁を越えたら、jQueryのCSSで反対側の位置へ移動させればいいだけです。まぁここら辺は、単純なので特に難しいこともないと思います。

まとめ

最近は、jQueryが普通に遣われているので、jQueryでも実現できると思います。下記のサイトも参考になると思います。

 - javascript, jquery ,

     

Message

  関連記事

【JavaScript】子ウィンドウ/親ウィンドウのお互いの要素を操作するには!?

以前、iframe内から親ウィンドウの要素を操作する記事を書きました。 ifra …

【jQuery】画像のキャプションのアニメーション

いやーユニクロのサイトがリニューアルされて相変わらずかっこいい!! その画像のロ …

PostMessageを使ったクロスドメイン通信によるメッセージの送受信を試してみた!

JavaScriptでいろいろ実装していると時に別ウィンドウを開いて、呼び出し元 …

html5でドラッグ&ドロップでローカルからテキストファイルをアップロード

先日、ファイルの読み込みをやりましたが、今度はローカルからファイルを読み込む方法 …

【jQuery】スライドコンテンツをjQueryのプラグインで作ってみた!!

以前、作成したjQueryの簡易画像ビュアーのコンテンツバージョンを作成しました …

JavaScriptで動画コンテンツを操作してみた!

前回、html5のvideoタグについて説明しました。 html5のvideoで …

【jQuery】親要素のさらに上の要素を選択したい

とある案件にて、ある要素の親要素のさらに親要素を選択したい時に普通に「paren …

【jQuery】TOPへ戻るボタンでスクロールさせる!!

ブログとか縦に長いサイトだとよくスクロールしていくとフワッと「ページトップへ」と …

【javascript】剰余(%)演算子を使って値が繰り返しループする処理をやってみた!

ちょっとプログラムで、配列の長さの値の範囲内で繰り返す値をどうすればいいのか検証 …

html5の独自データ属性を設定してjQueryで取得してみる

さて、最近はhtml5もすっかり浸透してきましたがhtml5では新しく独自のデー …