JavaScript

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

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

before-after.js

デモ

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

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

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

before-after.js

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

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

関連記事

  1. jQueryプラグインのスライダー集

    JavaScript

    【jQueryプラグイン】素晴らしい機能が満載のスライダー集

    jQueryプラグインには様々な役立つ機能がありますが、中でも人気が高…

  2. CSS Jquery Pie Countdown Timer

    JavaScript

    グラデーションが美しい円形カウントダウン「CSS Jquery Pie Countdown Time…

    円形によるカウントダウンのタイマーを実装する「CSS Jquery P…

  3. jQuery.Flexdatalist

    JavaScript

    テキスト入力候補を表示させれる「jQuery.Flexdatalist」

    jQuery.Flexdatalistはテキスト入力候補を表示させるこ…

  4. jQuery cardslider

    JavaScript

    カードをスライドさせるようにコンテンツを表示できる「jQuery cardslider」

    jQuery cardsliderは、コンテンツをカードのように表示し…

  5. Slinky.js

    JavaScript

    上下にスクロールでコンテンツが開閉するjQueryプラグイン「Slinky.js」

    なかなか面白かったのでご紹介します。上下にスクロールするとコンテンツが…

  6. no-image

    JavaScript

    レスポンシブでスタイリッシュな「lightbox-jquery-plugin」

    lightbox-jquery-pluginは、レスポンシブに対応した…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP