GitHubの画像diffって便利だし何だか面白いですよね。 ところで、このSwipe Diff機能がどのように実現されているか、皆様はパッとわかるでしょうか？ ・ ・ ・ 私は20秒ほど考えてわからなかったので、DevToolsから仕組みを調べてみました。 実装方法 わかってしまえば非常にシンプルで、 2枚の画像を重ねる 上層の画像のWrapper幅を、スライダーの位置と連動させる という発想でできていました。 上層のWrapper幅が小さくなると、下に隠されていた画像が覗いて、あたかも連続的に変化しているように見えるという寸法ですね。 実装 Reactで簡易的に実装したコードです。マウスホバー／スワイプで境界を動かせます。 （スマホからだとスワイプが少し難しいためPCで開いたほうがわかりやすいです） 要点のみ解説すると、 onPointerMoveイベントでポインタのX座標を取得し、上