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

 
Web Tips.
Booskanium's
Booskanium's Web Tips.

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

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

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

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

__petit_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を読んでください。