前回「画像比較がドラッグでできるjsを作りました。」で、画像比較ができるjsを作成したのですが、スマホ版が使いづらかったので、少しだけ改良したものを作成しました。

とりあえず、改良版を確認してみてください。PCでの挙動は変わっていないので、確認する際はスマホで確認してみてください。

ファイルはこちら


See the Pen view.comparison2 by blanks (@blanks-site) on CodePen.


何が変わったのかというと、スマホ版では境界線ではなく、要素全体をタッチムーブすれば、境界線が移動するように改良しました。

スマホ版で、境界線の箇所をタッチするのは結構難しいなと気づいたので、このような改良を加えました。

ぜひぜひ使ってみてくださいませ。