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. Linear Slider

    JavaScript

    シンプルな機能で使いやすいjQueryによる水平スライダー「Linear Slider」

    Linear Sliderはシンプルな機能性による水平スライダーを実装…

  2. JQuery-SnakeGallery

    JavaScript

    ホバーした方向へエフェクトが追従してくる「JQuery-SnakeGallery」

    JQuery-SnakeGalleryは、ホバーした方向へエフェクトが…

  3. JavaScript

    シンプルでスワイプにも対応したスライダーならSimple jQuery sliderがオススメ

    シンプルでスマホのスワイプにも対応したスライダーを実装したいって時にオ…

  4. Philter

    JavaScript

    CSSのフィルターをコントロールできるjQueryプラグイン「Philter」

    PhilterはCSSのフィルターを簡単にコントロールすることができる…

  5. Expandy Menu

    JavaScript

    マウスオーバーで広がるメニューパネル「Expandy Menu」

    Expandy Menuはマウスオーバーすると横に広がるメニューパネル…

  6. Bara-Bones-Slider

    JavaScript

    優れたカスタマイズ性を有するjQueryスライダー「Bara-Bones-Slider」

    Bara-Bones-Sliderは、優れたカスタマイズ性を有するイメ…

最近の記事

  1. Soundcore Liberty Air 2
  2. Soundcore Liberty 2
  3. マザーツリー
  4. RICOH THETA SC2

アーカイブ

PAGE TOP