[JS]ビフォーアフターの2枚の画像を分かりやすく比較できるようにするスクリプト -TwentyTwenty

2つの画像を重ねて、中央のバーをスライドしてビフォーアフターを切り替えて表示することで、簡単に比較できるようにするjQueryのプラグインを紹介します。

↓はただのキャプチャ画像なので動作しません。

TwentyTwenty
TwentyTwenty -GitHub

• TwentyTwentyのデモ
• TwentyTwentyの使い方

TwentyTwentyのデモ

デモはスクリプトのページに大きく掲載されています。
モダンブラウザをはじめ、スマフォ・タブレットでご覧ください。IEは8+で。

TwentyTwenty

中央のバーを左右にスライドすることで、ビフォーとアフターの画像を切り替えます。
まずは、右にスライドしてビフォーを表示。

右にスライドでビフォー

バーを左にスライドすると、アフターが表示されます。
2つの画像のヴィジュアル的な差異を引き立たせることができます。

左にスライドしてアフター

ページの中程にもデモがあります。

オプションでオーバーレイのパネルを設定しています。

TwentyTwentyの使い方

Step 1: 外部ファイル

「jquery.js」とプラグイン「event.move.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.event.move.js"></script>
<script type="text/javascript" src="js/jquery.twentytwenty.js"></script>

<link href="css/twentytwenty.css" media="screen" rel="stylesheet" type="text/css" />

Step 2: HTML

画像は一つ目にビフォー、二つ目にアフターを配置し、ラッパーで内包します。

<div id="container1">
 <!-- 一つ目にビフォーの画像 -->
 <img src="http://placehold.it/400x200&text=1" />
 <!-- 二つ目にアフターの画像 -->
 <img src="http://placehold.it/400x200&text=2" />
</div>

Step 3: JavaScript

ラッパーをjQueryのセレクタで指定し、スクリプトを実行します。

<script>
$(window).load(function(){
  $("#container1").twentytwenty();
});
</script>

オプション

スクリプトのオプションではバーが左からどれくらい離れているか設定できます。

<script>
$(window).load(function(){
  $(".twentytwenty-container").twentytwenty({default_offset_pct: 0.7});
});
</script>

スライダーの外観はスタイルシートでカスタマイズが可能で、Sassの変数を修正するだけでスライダーやバーのデザイン、オーバーレイのデザインなどを簡単に変更できます。