ダイエット前と後や昔と今の風景の違いなどをWebで表現する場合に、一番簡単なのは2枚の写真を並べて置くことですが、これだとあまり面白くないし、他のウェブサイトとの差別化になりません。
前後の違いをよりわかりやすくして、ユーザーエクスペリエンスを高めるためにも、ビフォーとアフターの写真を重ねて、ユーザーがスライダーで動かせるようなしくみを作ると面白いんじゃないでしょうか。
これをCSSのみで作るためには、CSS3で定義されたresizeプロパティを利用します。
resizeプロパティは、overflowプロパティがvisibleでないときに適用できます。
resizeプロパティには使用できる値がいくつかありますが、ここでは左右にだけ動けば良いので、horizontalを指定します。
resizeプロパティで使用できる値
- none
-
ユーザーにリサイズ機能を使わせない(初期値)
- both
-
水平方向と垂直方向の両方にリサイズができる
- horizontal
-
水平のみリサイズができる（今回はこれを使用）
- vertical
-
垂直のみリサイズができる
- inherit
-
親要素の値を継承する
このresizeプロパティですが、画像のimg要素へ直接、設定すると画像が伸びたり縮んだりしておかしなことになってしまうので、ビフォー画像（奥に配置した画像）をdivで囲んでからresizeプロパティを設定します。
HTMLの記述は以下のようになります。
CSSでは、画像の位置とサイズを設定します。
ビフォー画像（を囲ったdivタグ）には、最初に表示される画像の幅を指定します。通常はわかりやすく50％でよいでしょう。overflowプロパティは、初期値ではvisibleになっているので、hiddenにしておきます。
ユーザーがカーソルの存在に気づき、ドラッグしやすくするために白い四角形で画像の下に配置しておきます。
cursorプロパティのew-resizeは、左右のサイズ変更ができることを表すために、ポインタを左右の矢印に変えてくれますが、ブラウザによっては対応していない場合があります。私が試したところではSafariではポインタが普通の矢印のままでした。
スライダーのハンドルが見つけづらかったり、スマホではうまくスライドできないなど、まだツッコミどころが、いくつかあるのでもう少しグレードアップしたいところです。
CSSのみで簡単に作成できるのは、このくらいが限界なのかもしれません。
いちおう、デモのページを用意しておいたので、よかったら確認してみてください。
