2020年05月25日(月)

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

• 0
• 88
• 23
• 58

ビフォーとアフターの画像をコントローラーをスライドさせて比較するビューワーを簡単に実装できるスクリプトを紹介します。バニラJavaScriptで実装されており、他のスクリプトへの依存は一切ないので、利用しやすいと思います。

この手のスクリプトは今までにいくつか紹介してきましたが、今回のが一番いいかもしれません。

Image Compare Viewer
Image Compare Viewer -GitHub

Image Compare Viewerの特徴

Image Compare Viewerは、ビフォーとアフターの画像を比較するビューワーを簡単に実装できます。

ということで、さっそく実装してみました。
中央のコントローラーをスライドさせ、ビフォーとアフターの画像を表示します。

バニラJavaScriptで実装された軽量のビューワーで、依存関係は一切ありません。MITライセンスなので、商用プロジェクトでも無料で利用できます。

また、WordPressのプラグインとしても利用できます。

...