CSS

CSSでスライドして比較できるビフォー・アフター写真を作る

ダイエット前と後や昔と今の風景の違いなどを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のみで簡単に作成できるのは、このくらいが限界なのかもしれません。

いちおう、デモのページを用意しておいたので、よかったら確認してみてください。

Related posts

CSSでまるでタイピングしているように文字を表示する方法

ItSpaceBiz

アニメーションする円グラフをCSSで作るには

ItSpaceBiz

アニメーションするソナー効果をCSSで作る方法

ItSpaceBiz