コンパイラかく語りき

import { Fun } from 'programming'

個人サイト作成② スワイプ機能が完成しました!

chuckです。個人サイトを作成中です。

前回は無残にもスワイプ動作をつけることができませんでした。

 

chuckwebtips.hatenablog.com

 

いや、スワイプイベント自体はついたんですけど、やりたいと思っていたことが実現せず…。

やりたいことは「グーッ」と面をスライドさせたかったのですが、それには更にドラッグ操作が必要かもしれません。

 

現状↓

f:id:chuck0523:20151007222653p:plain

http://chuck0523.github.io/front-end-coding/rotateWindow/rotateWindow2.html

 

 

jQuery 画像 スワイプ」と検索。

こちらのサイトがヒットしました。DEMOを触ってみるとまさにこんな感じ!そうそう、これがやりたかったんだよ!

black-flag.net

ただ、今回は画像を左右にスライドさせるのではなく、ぐるりと回転させたい…。ちょっと工夫が必要?かもしれません。

 

できた

なんやかんや、できました。

f:id:chuck0523:20151009203143p:plain

http://chuck0523.github.io/front-end-coding/rotateWindow/rotateWindow3.html

 

左右にスワイプすることで、ページを左右に「ピューン!」と飛ばせます。

 

噛み砕く

キーは2つでした。

ドラッグ判定

前回は、ページが意図せぬ回転をしてしまいました。それもそのはずで、mousemoveに対して単純に回転イベントをつけていたためです。

つまり、ページの上をマウスが動くだけでイベントが発動してしまいます。

でも、やりたかったことはドラッグ的なイベントでした。まずグッとページをつかんで、それから回転させたかった。

なので、touchedという変数を用意しました。

mousedownでクリックされたらtouchedをtrueに変えます。そしてmouseupでクリックが終わったら、touchedをfalseに変えます。そして、touchedがtrueの間だけ回転イベントが発動するようにしました。

つまり、カチッとクリックしている間のみイベントが発動するので、あたかもドラッグイベントのように作動します。

(解説長い)

 

あ、偉そうに書いてますけど、これは全て参考ページ様のコードの通りです。詳しくは本家をご覧ください。

jQueryでフリック/スワイプ動作の画像スライドギャラリーを作成する実験 | BlackFlag

 

閾値判定

次に閾値を付けました。閾値は300ピクセル(絶対値)に設定しました。

300ピクセル以上ドラッグされたら、くるりと回転します。値がマイナスの時は右へのドラッグなので逆回転させました。

 

課題

もちろんこれで完成ではありません。

1つのページがぐるりと回転したら、次のページが来て欲しいです。その処理を次回作りたいと思います。

 

書いたの

coffee

gist74db7a691464a87ddf33

 

js

gist055356866e756ff30417