[JS]ビフォーとアフターをスライドして切り替えるスクリプト -beforeafter.js

ビフォーとアフターをバーでスライドして切り替えるスクリプトをCatch My Fameから紹介します。

jQuery Before/After Plugin
demo
※「before」と「after」の表示は付け加えたものです。

デモでは、画像にカーソルを重ねると分割するバーが表示され、左右にドラッグすることで画像のビフォーとアフターが表示されます。

バーを右にドラッグして、ビフォーを表示

バーを左にドラッグして、アフターを表示

ビフォーとアフターの二つの画像はdiv要素で配置しているだけなので、スクリプトオフ時には成り行きで画像が配置されます。

beforeafter.jsはjQueryのプラグインのため、実装にはjquery.jsが必要です。