JavaScript

レスポンシブに対応したビフォーアフター画像を実装できる「before-after.js」

before-after.jsはシンプルでレスポンシブに対応したビフォーアフター画像を実装することができます。中央にあるボタンを左右にスライド移動させることでビフォーとアフターを確認できます。

before-after.js

デモ

境界線をスライドさせることで2つの画像を比較することができるので、スペースを有効に使いたい時にはとても便利ですね。1枚分の画像スペースで済むので大きな画像を比較させたい場合にもよさそうです。

商品ページで使ったり画像の解像度を比較させたりなど、応用次第でいろんなところで活用できるかと思います。

スマフォやタブレットといった様々なデバイスからでも手軽にビフォーとアフター画像を見比べることができるので、この手の機能を実装したい時には覚えておきたいですね。

before-after.js

Chromeでタブを切り替えるChromeでタブを切り替えるショートカットキーについて前のページ

WordPressのツールバー(管理バー)が表示されない時の対処方法次のページツールバーが表示されない時の対処方法

関連記事

  1. simplePagination.js
  2. Scrolla

    JavaScript

    スクロール時にアニメーションするjQueryプラグイン「Scrolla」

    Scrollaは上下スクロールしたときにアニメーションするjQuery…

  3. Mirror Effect

    JavaScript

    ミラーエフェクトによるかっこいいスライドショー実装「Mirror Effect」

    Mirror EffectはWebサイト内でかっこいいミラーエフェクト…

  4. MediumLightbox

    JavaScript

    Mediumライクな画像ズームを実装できる「MediumLightbox」

    シンプルでエレガントな画像ズーム機能をwebサイトに実装できる「Med…

  5. 2013年上半期jQueryプラグインまとめ

    JavaScript

    2012年に紹介したjQueryプラグインのまとめ

    当ブログで2012年にご紹介したjQueryプラグインをまとめてみまし…

  6. JavaScript

    画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」

    こうゆうプラグインは初めて使ってみたんですが、とても面白いですね。Lo…

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP