マウスの動きやスクロールなど、閲覧ユーザーのブラウザのビューポート状態を監視するスクリプト・「Tornis」

Tornis

Tornisはマウスの動きやスクロールなど、閲覧ユーザーのブラウザのビューポート状態を監視するスクリプトです。シンプルで軽量、依存関係もなく、使いやすい設計となっています。

パララックスの為のスクリプトというわけではなく、ユーザーがどこまでスクロールしたか、マウスの速度や位置、スクロール速度などを監視する事が目的となります。

パララックス効果は作れるけど、基本的にはビューポートの監視を目的としているそうです。

使い方

ソース最後にスクリプトを読み込みます

<script src="tornis.js"></script>

監視内容を設定します

const trackMouse = ({ mouse, size, scroll }) => {
      if (mouse.changed) {//マウスの動きを監視
       //マウス位置を取得
        document.querySelector('.js-cursor-pos').innerText = `${mouse.x}, ${mouse.y}`;
       //マウスのカーソル速度を取得
        document.querySelector('.js-cursor-vel').innerText = `${mouse.velocity.x}, ${mouse.velocity.y}`;
      }

      if (size.changed) {//ビューポートサイズを監視
      //ビューポートサイズを取得
        document.querySelector('.js-size').innerText = `${size.x}, ${size.y}`;
      }

      
      if (scroll.changed) {//スクロールの動きを監視
        //スクロール位置を取得
        document.querySelector('.js-scroll-pos').innerText = `${scroll.left}, ${scroll.top}`;
        //スクロール速度を取得
        document.querySelector('.js-scroll-vel').innerText = `${scroll.velocity.x}, ${scroll.velocity.y}`;

        let scrollOffset = Math.round((scroll.bottom / (size.docY)) * 100);
        if (scrollOffset > maxScroll) {
          maxScroll = scrollOffset > 100 ? 100 : scrollOffset;
         //ページの高さを取得し、何%くらいスクロールしたかを取得
          document.querySelector('.js-scroll-max').innerText = `${maxScroll}%`;
        }

        if (maxScroll >= 95) {
         //95%以上閲覧した場合はサンクスメッセージに変更
          document.querySelector('.js-scroll-msg').innerText = '. Thanks for reading!';
        }
      }
    };

    __TORNIS.watchViewport(animateView);
    __TORNIS.watchViewport(trackMouse);

欲しい情報は取得できるみたい。使いこなせれば便利そうですね。ただ、使い方次第ではユーザーにネガティブな印象を与える可能性もあるので注意して使いたいところです。ライセンスはMIT。

Tornis