スライドで切り替えられる画像 TSUBAKI 10周年記念サイト

https://www.shiseido.co.jp/tsubaki10th/

資生堂TSUBAKI(ツバキ)10周年記念サイトです。

マネしたいポイント

Before Afterが分かるようにドラッグで切り替えられる画像があります。同じ画角で取られているのでどこが変わったか、分かりやすくなっています。下記画像だと少し分かりづらいですが、スクロールしていくこと動くアニメーションがあり、そこが動かせることが分かります。

応用できそうな場面

Before Afterの違いを示す場面や、切り替えせてアザーカットを見せるような場面で使えそうです。jQuery UIを使っており、比較的低コストで実装ができるかと思います。

懸念点

画像の上をドラッグすることはあまりないので、このサイトのようにドラッグできることを示さないとスルーされてしまうかもしれません。

  • Twitter Share
  • Facebook Share
  • Line Share