chuckです。
自分のための個人サイトを作成しているので、作成過程を記録します。
ちなみに、現状↓
http://chuck0523.github.io/front-end-coding/rotateWindow/rotateWindow.html
まあ、クリックイベントならスライドできます。
ここにスワイプ動作も付け加えようと思います。
参考にしたサイト
Qiitaを参考にしました。
ちなみに、スワイプを実装した経験は一応あります。仕事で２度ほど実装しました。
スワイプの基本
touchイベントですね。
やりたいこと
要は、divで作った面をスライドさせたいです。ある面をスワイプして、一定以上になったら次の面へ。
touchイベントの距離を取ればいいのかな？？
書いていく
コーディングしていきます。
〜ここで30分ハマる〜
やられました。DOMにタッチイベントがつかないと思ったら変数の巻き上げが起こっていました。
こうなっていました。
CoffeeScriptですが、要は呼ばれる関数が下に来ています。
上に持ってきて解決。
PCでもドラッグすることで、スワイプできるようにします。mouseイベントを追加。
サルが作るウェブアプリ: ライブラリを使わないでドラッグ＆ドロップするサル
処理の内容はこちら。ひとまず直観的に書いてみました。
スワイプした距離をとって、それを回転の角度に指定しています。
いざ、動かしてみると…
全くうまくいっていない。
http://chuck0523.github.io/front-end-coding/rotateWindow/rotateWindow2.html
完成図は、面をスワイプしたら次々にその他の面がスライドしてくるって感じなんですが…。
ひょっとしてかなり難しい？？
今回は時間切れなので、また次回続きをやっていきます。
書いたコード
coffee
コンパイル後のJS
その他の参考サイト