JavaScript

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

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

before-after.js

デモ

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

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

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

before-after.js

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

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

関連記事

  1. SweetModal

    JavaScript

    シンプルでエレガントなモーダルウィンドウを実装できる「SweetModal」

    SweetModalは、アラートやダイアログなどをシンプルでエレガント…

  2. jQuery Floating Social Share
  3. bootstrap-wysihtml5

    JavaScript

    シンプルで美しいWYSIWYGエディタを実装できる「bootstrap-wysihtml5」

    bootstrap-wysihtml5はシンプルでスッキリしたデザイン…

  4. JUMBLE

    JavaScript

    テキストの色をカラフルにシャッフルさせるjQueryプラグイン「JUMBLE」

    JUMBLEというjQueryプラグインを使えば、指定したテキストの色…

  5. Sticky Sidebar

    JavaScript

    スマートでハイパフォーマンスな追尾型サイドバー実装「Sticky Sidebar」

    Sticky Sidebarは、スマートでハイパフォーマンスな追尾型サ…

  6. JavaScript

    2KB程の軽量&シンプルなjQueryスライダー「Craftyslide」を使ってみた

    とてもシンプルで軽量ないい感じのjQueryプラグイン「Craftys…

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP