マウスカーソルの位置でスライダーらしきものがスライド？ 教えてください

下記サイトにアクセス時に右上にバツ印が出るので押下した後にページ下部にスライダー？らしきものが出ます
http://www.dawnofapes.com

どなたかそのスライダーの動きの正体を知っていればご教示お願いいたします。
座標を取得しているのか、、マウスカーソルの位置によって横並び画像が若干センターよりに近づいている？

また、恐縮ですがやり方わかればそこもご教示願いたいです、、（できれば記述の仕方など、、）


よろしくお願いいたします

No.1 回答者： fujillin 回答日時： 2017/08/28 10:23

こんにちは

＞どなたかそのスライダーの動きの正体を知っていればご教示お願いいたします。
正体は知りませんし、ざっと観察しただけで確認はしていませんが・・・

通常のスライダーで、制御をカーソルの位置（X座標）に応じて行っているものと思われます。

具体的には、画面幅に対してカーソルの位置を、例えば左端で0%、右端で100%とするなら、スライダーの移動量をそれに応じて行っているだけのように思います。
スライダーの総移動量は、「スライダーの総幅」-「表示領域の幅（＝画面幅）」となりますので、スライダーの各コマ全体のラッパーをカーソル位置に応じて、「-1×総移動量×マウス位置（%）」（-1は左に移動と言う意味）だけ移動するという制御を行っているようです。

移動そのものは、ラッパー要素のCSS transformの値を変えることで行っているようですね。