JavaScript

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

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

before-after.js

デモ

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

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

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

before-after.js

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

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

最近の記事

  1. Switchと星のカービィ
  2. ブラックサンダー
  3. ユニカフェ
  4. ぬれマスク(立体タイプ)
PAGE TOP