ITエンジニア/デザイナ向けにオープンソースを毎日紹介

二つの画像を見比べて何が違うのか判断するにはどうしたら良いでしょうか。横並びにしてもなかなか分かりづらいかも知れません。逆に変換前後でファイルサイズが軽減されている場合は、見た目が変わっていないことを理解させたいこともあります。

そんな時に使えるのがtwentytwentyです。スライダーを使って左右の画像を差し替えます。

twentytwentyの使い方

基本的な使い方は縦に分かれていて、左右に動かせるものです。

マウスオーバーで前後のラベルが出ます。

上下で変化を見せることもできます。

二つの画像はサイズが同じである必要があるでしょう。そしてスライダーを動かすことで変化している、または変化していないことを確認できます。時々このような表示を使いたくなることがあるので覚えておくと便利です。

twentytwentyはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

zurb/twentytwenty: jQuery Plugin to Compare Images

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2