ビフォーとアフターの画像をスライドして比較できるスクリプト Image Compare Viewer
Image Compare Viewerは、ビフォーとアフターの画像をコントローラーをスライドさせて比較するビューワーを簡単に実装できます。
バニラJavaScriptで実装された軽量のビューワーで依存関係は一切なく、MITライセンスのため商用プロジェクトでも無料で利用できるらしいです。
画像、コードは公式から引用してます。
https://gyazo.com/36a49b41d1ca2201fae4dca77783d780
install
code:command
npm install image-compare-viewer
HTMLは2 つの画像を含む親にIDまたはクラス名を追加するだけの簡単なものです。
code:html
<div id="image-compare">
<img src="path/to/before.jpg" alt="" />
<img src="path/to/after.jpg" alt="" />
</div>
JavaScript
code:js
import ImageCompare from "image-compare-viewer";
1つのみの場合
code:js
const element = document.getElementById("image-compare");
const viewer = new ImageCompare(element).mount();
複数の場合
code:js
const viewers = document.querySelectorAll(".image-compare");
viewers.forEach((element) => {
let view = new ImageCompare(element).mount();
});
オプションをつける場合
(smoothingとsmoothingAmountは、現在Safariでは自動的に無効に設定されています)
code:js
const options = {
// UI Theme Defaults
controlColor: "#FFFFFF", // 枠線、図の色
controlShadow: true, // コントロールの影
addCircle: false, // サークルをつけるかどうか
addCircleBlur: true, // サークルにブラーをつけるかどうか
// Label Defaults
showLabels: false, // 画像にラベルをつけるかどうか
labelOptions: {
before: 'Before', // 左下に設定したラベルがつく
after: 'After', // 右下に設定したラベルがつく
onHover: false // ホバーした時に表示させるかどうか falseなら常時
},
// Smoothing
smoothing: true, // falseだとタッチした時にアニメーションがなく枠が移動する
smoothingAmount: 100, // スムージングの時間。数値が大きいほど減衰が大きくなる
// Other options
hoverStart: false, // trueでホバーした時に枠がついていくように。クリックすると手動制御が有効になる。
verticalMode: false, // trueで縦にわかれる
startingPoint: 50, // 前の画像を表示する割合を指定。50で真ん中
fluidMode: false // コンテナの高さと幅を互いに独立したフルードにすることができる。自分で高さを設定する必要がある。
};
const viewer = new ImageCompare(element, options).mount();
github
公式サイト
参考