画像比較ツール「TwentyTwenty」を試してみた。

画像比較JavaScriptツール「TwentyTwenty」を試してみた。

TwentyTwentyを使うと、2つの画像を重ねて表示して、中央のバーをスライダーで動かしながら画像比較できる。

画像は「Imaging Resource」の「G7 X Mark II」と「RX100 VI」の写真を借りている。

設定は簡単。画像ファイルとJavaScript、CSSを以下のように指定するだけ。JavaScript、CSSは、「TwentyTwenty」からダウンロードできる。

<div class="container">
	<img src="img/画像1.jpg">
	<img src="img/画像2.jpg">
</div>

＜CSS＞

<link href="css/twentytwenty.css" rel="stylesheet">

＜JavaScript＞

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="js/jquery.event.move.js"></script>
<script src="js/jquery.twentytwenty.js"></script>
<script>
	$(function(){
		$(".container").twentytwenty();
	});
</script>

後日、任意の機種を比較できるページを作成。↓

晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

画像比較ツール「TwentyTwenty」を試してみた。