ビフォーとアフターの画像をスライドして比較するビューワーを実装できる軽量スクリプト -Image Compare Viewer

ビフォーとアフターの画像をコントローラーをスライドさせて比較するビューワーを簡単に実装できるスクリプトを紹介します。バニラ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: 外部ファイル

当スクリプトとスタイルシートを外部ファイルとして記述します。

Step 2: HTML

ビフォー画像とアフター画像の2枚を用意し、親にはidまたはclassを与えます。

Step 3: JavaScript

スクリプトを初期化し、親のidまたはclassを指定して実行します。

オプション

オプションがいろいろ用意されているので、実際に実装してみました。
まずは、デフォルトの状態です。

ビフォーの画像
アフターの画像

ビューワーのUIデザインを変更してみます。
コントローラーをサークルにして、カラーも変更してみました。

ビフォーの画像
アフターの画像

スタート位置を変更することもできます。

ビフォーの画像
アフターの画像

コントローラーのトリガーをホバーにできます。

ビフォーの画像
アフターの画像

オプションでは、下記の項目を設定できます。

sponsors

top of page

©2020 coliss