[JS]スクロール・マウスの位置や速度など、ビューポートの状態を簡単に取得できるJavaScriptライブラリ -Tornis

サイト構築 -JavaScript

Post on:2019年5月22日

Tornisの特徴

Tornisは、ブラウザのビューポートの状態を監視する軽量のJavaScriptライブラリです。ビューポート・スクロール・マウスなどに何か変化があった時にその値を取得できます。

マウスの位置
マウスの速度
ビューポートのサイズ
スクロールの位置
スクロールの速度
デバイスの向き（近日対応予定）

ユーザーが操作したこれらの値を組み合わせて、あらゆる種類のエフェクトを作り出すことができます。

Tornisのデモ

デモページでは、Tornisがビューポート・スクロール・マウスの値をどのように取得するか確認できます。

Tornis

スクロールの速度に合わせたアニメーション、スクロールの位置に合わせたパララックス、マウスの位置・速度に合わせたパララックス、ビューポートのサイズに合わせたレイアウト変更などが楽しめます。

Tornisの使い方

インストール

Tornisは、npmからインストールすることもできます。

npm install tornis --save

1	npm install tornis --save

外部ファイル

ファイル/dist/tornis.jsをプロジェクトにコピーし、scriptタグで実装します。従来のブラウザをサポートしている場合は、ES5バージョンの/dist/tornis.es5.jsを使用できます

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

1	<script src="path/to/tornis.js"></script>

Tornisをロードすると、グローバル変数「window.__TORNIS」が作成され、監視機能にアクセスすることができます。

__TORNIS.watchViewport(updateValues);

__TORNIS.unwatchViewport(updateValues);

const state = __TORNIS.getViewportState();

__TORNIS.watchViewport(updateValues);

__TORNIS.unwatchViewport(updateValues);

const state = __TORNIS.getViewportState();

基本的な使い方

関連するプロパティのいずれかが変更されると、監視されている関数は自動的に実行されます。

// import the Tornis store functions
import { 
  watchViewport, 
  unwatchViewport, 
  getViewportState
} from 'tornis';

// define a watched function, to be run on each update
const updateValues = ({ size, scroll, mouse, orientation }) => {
  if (size.changed) {
    // do something related to size
  }
  
  if (scroll.changed) {
    // do something related to scroll position or velocity
  }

  if (mouse.changed) {
    // do something related to mouse position or velocity
  }
};

// bind the watch function
// By default this will run the function as it is added to the watch list
watchViewport(updateValues);

// to bind the watch function without calling it
watchViewport(updateValues, false);

// when you want to stop updating
unwatchViewport(updateValues);

// to get a snapshot of the current viewport state
const state = getViewportState();

// import the Tornis store functions

import {

watchViewport,

unwatchViewport,

getViewportState

} from 'tornis';

// define a watched function, to be run on each update

const updateValues = ({ size, scroll, mouse, orientation }) => {

if (size.changed) {

// do something related to size

}

if (scroll.changed) {

// do something related to scroll position or velocity

}

if (mouse.changed) {

// do something related to mouse position or velocity

}

};

// bind the watch function

// By default this will run the function as it is added to the watch list

watchViewport(updateValues);

// to bind the watch function without calling it

watchViewport(updateValues, false);

// when you want to stop updating

unwatchViewport(updateValues);

// to get a snapshot of the current viewport state

const state = getViewportState();

watchViewport()関数に渡すことで、関数を登録することができます。

{
  scroll: {
    changed: Boolean,
    left: Integer,
    right: Integer,
    top: Integer,
    bottom: Integer,
    velocity: {
      x: Integer,
      y: Integer
    }
  },
  size: {
    changed: Boolean
    x: Integer,
    y: Integer,
    docY: Integer
  },
  mouse: {
    changed: Boolean,
    x: Integer
    y: Integer
    velocity: {
      x: Integer
      y: Integer
    }
  }
}