異なる2つのhtmlをフリック操作で移動

Question

###前提・実現したいこと
前提）
異なる2つのwebページとして AAA.htmlとBBB.htmlがあるとします。
それらのWebページをフリック操作で遷移したいのですが、その実現方法が分かりません

###調べたこと、試してみたこと

<div></div>でくくった中のことであるならば、 * swiper.js * flickity * http://blow-in.net/blog/entry-1433.html

実現したいのは異なるwebページ間の移動なので動きはあっているが構成が違うという感じです。

###補足情報(そもそも分かっていないこと)
可能であればgithub.ioなどにポンとアップロードしてその挙動を確認できるようにしたいです。
もしサーバ側の実装などが要るのであれば、その方法でも教えていただきたいです。

Angular.jsなどさえあれば、github.ioにポンとAddして動かせるとかいうのであれば理想的です。

以上、よろしくお願いします。

Answer 1

jQuery Touch Events
https://github.com/benmajor/jQuery-Touch-Events

タッチ操作をまとめたプラグインがありますので、それぞれのページで下記のようなscriptを記述してみてはどうでしょうか。

AAA.htmlにて

$('body').on('swiperight', function() { 
    location.href = 'http://example.com/BBB.html';
});

BBB.htmlにて

$('body').on('swipeleft', function(e) { 
    location.href = 'http://example.com/AAA.html';
});

Answer 2

JavaScriptにタッチ操作を扱うことができるイベント(touchstartやtouchmoveやtouchend)が存在しますので、例えば以下のような処理を書くことでページ間の移動を実現することができると思います。

• touchstartの発生位置やtouchendの発生位置を比較して、右にフリックされたか左にフリックされたかを判定する
• AAA.htmlのページで右にフリックされた場合はBBB.htmlページへ移動する
• BBB.htmlのページで左にフリックされた場合はAAA.htmlページへ移動する

フロントのJavaScriptで全て行えますので、サーバー側で何かしなければならないということはありません。

また探せば似たようなプラグイン等がありそうな気がします。

Comments

[退会済みユーザー]

ご回答ありがとうございます。
私も概ねご回答いただいたとおりの感触を得ています。

今回の記事の論点は、
AAA.htmlのページで右にフリックされた場合はBBB.htmlページへ移動する
BBB.htmlのページで左にフリックされた場合はAAA.htmlページへ移動する
の部分をどう実装するか？
というところになります。