Before and After image script

JavaScript

ビフォーとアフターを見比べれるjQueryプラグイン「Before and After image script」

Before and After image scriptはビフォーとアフターの画像を見比べることができるjQueryプラグインです。画像の中央には左右にスライドできるバーが設けられてあり、これを動かすことでBeforeとAfterの表示面積を変更することができます。

[ads_center]

Before and After image script

Before and After image script

Before and After image script

スライドバーをドラッグして左右に動かしてBefore・Afterを変更する以外にも、画像内の任意の場所をクリックしてもバーを移動させることができます。

2枚並べて見比べるのではなくて、1枚分のスペースでビフォーアフターをチェックすることができるので、場所を有効活用したい時にも役立ちますね。

というわけで、ビフォーアフター画像を実装できる「Before and After image script」のご紹介でした。

関連記事

  1. Captall

    JavaScript

    画像やDOM要素の上にキャプションを表示することができるjQueryプラグイン「Captall」

    CaptallというjQueryプラグインを使えば、画像や設定したDO…

  2. ax5ui-menu

    JavaScript

    カスタマイズしやすいコンテキストメニューを実装できる「ax5ui-menu」

    ax5ui-menuはカスタマイズしやすいシンプルなコンテキストメニュ…

  3. baffle.js

    JavaScript

    DOM要素内のテキストを難読化させて読めるようにする「baffle.js」

    baffle.jsは、DOM要素内のテキストを暗号化して難読化させ、さ…

  4. jQuery ui material design datepicker
  5. Shave

    JavaScript

    設定した高さに基づいて複数行のテキストを切り取る「Shave」

    Shaveは設定した最大の高さに基づいてHTML要素内に収まるように複…

  6. no-image

    JavaScript

    カスタマイズもできるダイナミックなコンタクトフォーム「Swyft Callback」

    Swyft Callbackはカスタマイズもできるダイナミックで美しい…

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP