ビフォーとアフターの画像を比較するビューワーを実装できる軽量スクリプト -Image Compare Viewer
Post on:2020年5月25日
sponsors
ビフォーとアフターの画像をコントローラーをスライドさせて比較するビューワーを簡単に実装できるスクリプトを紹介します。バニラJavaScriptで実装されており、他のスクリプトへの依存は一切ないので、利用しやすいと思います。
この手のスクリプトは今までにいくつか紹介してきましたが、今回のが一番いいかもしれません。
Image Compare Viewer
Image Compare Viewer -GitHub
Image Compare Viewerの特徴
Image Compare Viewerは、ビフォーとアフターの画像をスライドして比較するビューワーを簡単に実装できます。
ということで、さっそく実装してみました。
中央のコントローラーをスライドさせ、ビフォーとアフターの画像を表示します。
バニラJavaScriptで実装された軽量のビューワーで、依存関係は一切ありません。MITライセンスなので、商用プロジェクトでも無料で利用できます。
また、WordPressのプラグインとしても利用できます。
Image Compare Viewerのデモ
デモページでは、Image Compare Viewerのデモを楽しめます。
オプションも用意されており、実際にさまざまなビューワーをこのページの下の方に実装してあるので、試してみてください。
Image Compare Viewerの使い方
Step 1: 外部ファイル
当スクリプトとスタイルシートを外部ファイルとして記述します。
|
1 2 3 4 |
<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> |
Step 2: HTML
ビフォー画像とアフター画像の2枚を用意し、親にはidまたはclassを与えます。
|
1 2 3 4 |
<div id="image-compare"> <img src="path/to/before.jpg" alt="" /> <img src="path/to/after.jpg" alt="" /> </div> |
Step 3: JavaScript
スクリプトを初期化し、親のidまたはclassを指定して実行します。
|
1 2 3 |
const element = document.getElementById("image-compare"); const viewer = new ImageCompare(element).mount(); |
オプション
オプションがいろいろ用意されているので、実際に実装してみました。
まずは、デフォルトの状態です。
ビューワーのUIデザインを変更してみます。
コントローラーをサークルにして、カラーも変更してみました。
スタート位置を変更することもできます。
コントローラーのトリガーをホバーにできます。
オプションでは、下記の項目を設定できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
const options = { // UI Theme Defaults controlColor: "#FFFFFF", controlShadow: true, addCircle: false, addCircleBlur: true, // Label Defaults showLabels: false, labelOptions: { before: 'Before', after: 'After', onHover: false }, // Smoothing smoothing: true, smoothingAmount: 100, // Other options hoverStart: false, verticalMode: false, startingPoint: 50, fluidMode: false }; // Add your options object as the second argument const viewer = new ImageCompare(element, options).mount(); |
sponsors
