これはぜひ試してみて欲しい！ GitHubで使われている画像の差分表示があります。二つの画像の微妙な変化を知るのにスライダーを使っているのが特徴です。プログラミングコードと違い、バイナリの差分を見る上で（サイズなどの違いがなければ）面白い比較方法です。 そんな差分表示をjQueryで実現するのがCovering Badです。早速見てみましょう。 縦型のスライダ。ドラッグすると… こんな感じにカラーの範囲を自在に変更できます。 縦型もあります。 画像は白黒に限らず利用できます。 実際の使い方ですが、Canvasで加工して…という訳ではなく単純に二つの画像を利用する形になっています。HTMLで言うとこんな感じです。

<div class="covered third" data-passive="images/1.jpg" data-active="images/2.jpg" style="background-image: url(http://seyedi.github.io/Covering-Bad/images/1.jpg);">
  <div class="handle" style="left: 248px; top: 30px;"><span class="left icon-chevron-left"></span><span class="right icon-chevron-right"></span></div>
  <div class="changeable" style="background-image: url(http://seyedi.github.io/Covering-Bad/images/2.jpg); height: 400px; width: 248px; border-right-width: 1px; border-right-style: dashed; border-right-color: rgb(255, 255, 255);"></div>
</div>

リソースで見ると、一つの画像はこんな感じ。 二つ目の画像はこんな感じ。 複数の画像を用意するのは若干面倒かも知れませんが、使いどころによっては面白い見せ方ができると思います。ドラッグすると画像の向こう側が見える、みたいなやり方も面白そうです。創造性がかき立てられますね。 Covering BadはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Covering Bad seyedi/Covering-Bad