2枚の画像を同位置で左右にドラッグしながら表示切り替えしたい

Question

タイトルどおりなのですが、添付画像のような動きをさせたいのです。(矢印はカーソルまたは指だと思ってください)
ちょっと前に見たサイトで、ビフォーアフターの様子をこのような形で表示していたのですが、そのページを失念してしまいました。

なんと検索しても引っかからず…JSで実装できますでしょうか？

よろしければご教授いただけますと幸いです。

Answer 1

「JavaScript ビフォーアフター」「JavaScript 画像 比較」とかそういうキーワードから探せばいくつかライブラリが出てくると思います。

【[JS]ビフォーアフターの2枚の画像を分かりやすく比較できるようにするスクリプト -TwentyTwenty | コリス】
https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-twentytwenty.html

【JavaScriptで画像を比較できるライブラリ | hifive開発者ブログ】
https://blog.htmlhifive.com/2017/10/24/javascript-image-comparison-library/

Comments

[_hasegawa_]

ありがとうございます！まさにこの機能でした…！