スマホのウェブページでスワイプ

見出し右端の記号は?

Web Page
Booskanium's Tips.
忘れっぽい落書き人のメモ

この目論見の結果は微妙でした。
なぜってスマホのブラウザ自体がスワイプでページ内をスクロールさせているからです。
それでも左右スワイプなら使えそうです。

思っていたより難解な条件設定が必用でした。

  • ターゲット域を外れた時
  • スワイプの方向(ラジアン)
  • 速いスワイプで慣性をもたせる(勢いでビュワーんと動く、あの余韻)
  • スマホはX,Y座標が小数点まで戻る(物理デバイス≠ブラウザのサイズ)
  • UIの動きは移動量、移動時間、移動方向で決める
  • マウスのドラッグでスワイプをシミュレーション
  • パソコンでのマウスイベントはmouseoutは内包するエレメントでも発生する
  • パソコンでのmousemoveで内包するエレメントが選択されてしまう
  • 各種プロパティを初期化するタイミング
  • ちゅんラヂの音量調整に使える様に機能調整したら複雑怪奇になってしまった
    逆に言うと実用に堪える機能として実装できました (^_^;)

スワイプはスマホのブラウザ、またはPCブラウザのデベロッパーモードにてスマホ・シミュレーションで確認できます。
素のPCブラウザではマウスイベントでスワイプ牴牾の動きも実装しました。

“__swipe.js”がスワイプ検出用のリエントラントなクラス記述です。同一ページ内に複数数のスワープエリアがあっても動作します。
それ以外の記述はこのHTMLの中に押し込めてあります。
なおテストしながら機能調整を続けましたら、条件判断が多く複雑怪奇になりました。

ECMAScript 2015 以降の構文を使っていますのでレガシーブラウザ(IE11など)では機能しません。


.oO ここの枠内でのスワイプ検出が確認出来ます Oo.

 

 

【枠】

起点 X:   Y:

終点 X:   Y:

寸法 W:   H:

【X軸の移動】

開始位置X:

終了位置X:

相対位置X:


【Y軸の移動】

開始位置Y:

終了位置Y:

相対位置Y:


【平面移動】

座標距離:

移動ラジアン: θ

移動角度:


移動時間:

加速度:

X位置百分率: %

Y位置百分率: %


.oO 複数枠のスワイプ検出の確認 Oo.

 

 

【枠】

起点 X:   Y:

終点 X:   Y:

寸法 W:   H:

【X軸の移動】

開始位置X:

終了位置X:

相対位置X:


【Y軸の移動】

開始位置Y:

終了位置Y:

相対位置Y:


【平面移動】

座標距離:

移動角度: θ


移動時間:

ソースコードはこのHTMLと__swipe_jsを読んでください。