概要
みなさんは、このようなUIは見たことがあるでしょうか？
この記事では、↓このようなUIをCSSだけで作成する方法とImage Compare Viewerを使う方法を紹介します。
CSSだけで実装する場合
CSSで実装する場合は、CSS プロパティのresizeを使うため、
before と afterを切り替えるためのドラックするUIが少し扱いづらいですがご了承ください。
基本的な書き方
以下のようなHTMLに対してスタイルを当てる前提で進めます。
<div class="container">
<div class="before">
<img src="**/**/before.jpeg" class="image"/>
</div>
<img src="**/**/after.jpeg" class="image"/>
</div>
基本方針は、
beforeクラスのdivをposition: absolute;でafter画像の上に持ってきて、
cssプロパティのresize要素でbeforeクラスのdivを可変させる
このようにスタイルを当てていきます。
スタイルを当てる
STEP. 1 before・afterの画像を重ねる
まずは、beforeクラスのdivをafter画像の上に持ってきます。
.containerにposition: relative;、.beforeにposition: absolute;を指定すると、
before・afterの画像を重ねることができます。
.container {
position: relative;
width: fit-content;
}
.before {
position: absolute;
}
.image {
display: block;
}
See the Pen resize - 1 by でぐぅー | Qiita (@sp_degu) on CodePen.
STEP. 2 リサイズできるようにする
div要素をリサイズできるようにするために、
resize: horizontal;とoverflow: auto;を指定することで、
水平方向へのリサイズができるようになります。
このようにすると、水平方向へ画面がある限りリサイズできるので、
max-widthを決めて、最大サイズを決めます。
.container {
position: relative;
width: fit-content;
}
.before {
position: absolute;
resize: horizontal; /* 追加 */
overflow: auto; /* 追加 */
max-width: 100%; /* 追加 */
}
.image {
display: block;
}
See the Pen resize - 1 by でぐぅー | Qiita (@sp_degu) on CodePen.
※ 画像の右下のアイコンから、リサイズできます。
STEP. 3 デザインを調整する
以下のスタイルを調整します。
- before・afterで半分ずつ表示させたいので、
beforeクラスのdivにwidthを指定します。 - 画像の境界がわかりやすいようにborderを追加します。
変更したスタイルはこんな感じです。
.container {
position: relative;
width: fit-content;
border: 1px solid rgba(0,0,0,.12); /* 追加 */
}
.before {
position: absolute;
resize: horizontal;
overflow: auto;
max-width: 100%;
width: 50%; /* 追加 */
border-right: 1px solid red; /* 追加 */
}
.image {
display: block;
}
See the Pen resize - complete by でぐぅー | Qiita (@sp_degu) on CodePen.
Image Compare Viewerで実装する場合
CSSだけで、画像のbefore・afterを比較できるようなUIを作ると
ドラッグする部分がわかりにくいので、ユーザビリティがあまり良くありません。
そういう時は、Image Compare Viewerを使うと便利です。
使い方
STEP. 1 外部ファイルをインポートする。
スクリプトとスタイルシートを外部ファイルとして記述します。
<head>
<script src="https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.js"></script>
<link type="text/css" href="https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.css">
</head>
npnを使う時は、こちらのコマンドで利用します。
npm install image-compare-viewer
STEP. 2 HTMLを記述する
beforeとafterの画像を記述して、親要素にidを指定します。
<div id="image-compare">
<img src="**/**/before.jpeg" alt=""/>
<img src="**/**/after.jpeg" alt=""/>
</div>
STEP. 3 JavaScriptを記述する
スクリプトを初期化して、親のidを指定して実行します。
import imageCompareViewer from "https://cdn.skypack.dev/image-compare-viewer@1.5.0";
const element = document.getElementById("image-compare");
const viewer = new imageCompareViewer(element).mount();
完成したのがこちら
See the Pen Untitled by でぐぅー | Qiita (@sp_degu) on CodePen.
カスタマイズする
オプションをつけると、UIをカスタマイズすることができます。
| property | 値 | 解説 |
|---|---|---|
| controlColor | Color | コントローラーの枠線、図の色 |
| controlShadow | Bool | コントローラーに影をつけるか |
| addCircle | Bool | コントローラーの周りにサークルをつけるか |
| addCircleBlur | Bool | コントローラーの周りのサークルにブラーをつけるか |
| showLabels | Bool | 画像にラベルをつけるか |
| labelOptions | -- | ラベルのオプション |
| ┗ before | String | ラベルの文字 |
| ┗ after | String | ラベルの文字 |
| ┗ onHover | Bool | ホバーした時にラベルを表示させるか |
| smoothing | Bool | タッチでアニメーションさせるか |
| smoothingAmount | Number | スムージングの時間 |
| hoverStart | Bool | ホバーしたら枠がついていくようするか |
| verticalMode | Bool | 縦に分けるか |
| startingPoint | Number | スタートの位置 |
| fluidMode | bool | コンテナの高さと幅を互いに独立したフルードにするか |
まとめ
この記事では、画像のbefore・afterをスライドさせて、比較できるようなUIについて、
CSSだけで実装する方法と Image Compare Viewerで実装する方法を紹介しました。
エンジニア夏休み企画をやっているので、普段業務では使わないけど、
やってみたかったことをしてみました。
CSSだけで、画像のbefore・afterをスライドさせて、比較できるようなUIは、結構無理がありそうです。
紹介した内容が限界でした。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。