WEB上では限定的な使い方にはなってしまいますが、フィルターのON/OFF・背景のモノクロとカラー、化粧の有り無しなど、全く同じもので異なる状況を比べるというときに便利なのが、今回紹介するスワイプでBefore/Afterを表現するスライダー「Beer Slider」です。

上記のように左右で写真が表示されて、スワイプまたはスライドで写真の表示領域を切り替えることが可能です。

詳しくは以下

ソースは比較的シンプルで、普段からWEB制作をしたことがある方であれば、問題なく実装できるレベルだと思います。実際のデモやコードのサンプルは「Beer Slider Responsive & Accessible Before-After Slider – Demo – PEPSized」からご覧いただけます。

ソース自体は「GitHub – pehaa/beerslider: A vanilla JS keyboard accessible plugin for any before-after comparison」にアップされており、ライセンスはMIT License (MIT)となっており、ライセンスの範囲で自由に利用することが可能です。

使い所はなかなか難しいですが、このスライダーでしか表現できないものもあるため、一つ覚えておいても良いアセットだと思います。

Beer Slider Responsive & Accessible Before-After Slider – PEPSized