読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

import { Fun } from 'programming'

個人サイト作成① スワイプ動作を実装…できなかった

chuckです。

自分のための個人サイトを作成しているので、作成過程を記録します。

 

ちなみに、現状↓

f:id:chuck0523:20151006230214p:plain

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

 

まあ、クリックイベントならスライドできます。

ここにスワイプ動作も付け加えようと思います。

 

 

参考にしたサイト

Qiitaを参考にしました。

qiita.com

 

ちなみに、スワイプを実装した経験は一応あります。仕事で2度ほど実装しました。

 

スワイプの基本

f:id:chuck0523:20151007210852p:plain

touchイベントですね。

 

やりたいこと

要は、divで作った面をスライドさせたいです。ある面をスワイプして、一定以上になったら次の面へ。

touchイベントの距離を取ればいいのかな??

 

書いていく

コーディングしていきます。

 

 〜ここで30分ハマる〜

 

やられました。DOMにタッチイベントがつかないと思ったら変数の巻き上げが起こっていました。

こうなっていました。

f:id:chuck0523:20151007215637p:plain

CoffeeScriptですが、要は呼ばれる関数が下に来ています。

 

上に持ってきて解決。

f:id:chuck0523:20151007215720p:plain

 

PCでもドラッグすることで、スワイプできるようにします。mouseイベントを追加。

f:id:chuck0523:20151007220010p:plain

サルが作るウェブアプリ: ライブラリを使わないでドラッグ&ドロップするサル

 

処理の内容はこちら。ひとまず直観的に書いてみました。

f:id:chuck0523:20151007222314p:plain

スワイプした距離をとって、それを回転の角度に指定しています。

 

いざ、動かしてみると…

全くうまくいっていない。

f:id:chuck0523:20151007222653p:plain

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

 

完成図は、面をスワイプしたら次々にその他の面がスライドしてくるって感じなんですが…。

ひょっとしてかなり難しい??

 

今回は時間切れなので、また次回続きをやっていきます。

 

書いたコード

coffee

giste98c0f6d4f1971686d52

 

コンパイル後のJS

gist88211f42dc7e4aac368a

 

その他の参考サイト

www.htmq.com

 

app.codegrid.net