[JS]スクロール・マウスの位置や速度など、ビューポートの状態を簡単に取得できるJavaScriptライブラリ -Tornis
Post on:2019年5月22日
sponsors
スクロールの速度に合わせたアニメーション、スクロールの位置に合わせたパララックス、マウスの位置・速度に合わせたパララックス、ビューポートのサイズに合わせたレイアウト変更などを実装するために、ビューポートを監視し、その状態を簡単に取得できる軽量JavaScriptライブラリを紹介します。
位置を取得できるのはよくありますが、速度まで取得できるのは珍しいですね。
Tornisの特徴
Tornisは、ブラウザのビューポートの状態を監視する軽量のJavaScriptライブラリです。ビューポート・スクロール・マウスなどに何か変化があった時にその値を取得できます。
- マウスの位置
- マウスの速度
- ビューポートのサイズ
- スクロールの位置
- スクロールの速度
- デバイスの向き（近日対応予定）
ユーザーが操作したこれらの値を組み合わせて、あらゆる種類のエフェクトを作り出すことができます。
Tornisのデモ
デモページでは、Tornisがビューポート・スクロール・マウスの値をどのように取得するか確認できます。
スクロールの速度に合わせたアニメーション、スクロールの位置に合わせたパララックス、マウスの位置・速度に合わせたパララックス、ビューポートのサイズに合わせたレイアウト変更などが楽しめます。
Tornisの使い方
インストール
Tornisは、npmからインストールすることもできます。
|
1 |
npm install tornis --save |
外部ファイル
ファイル/dist/tornis.jsをプロジェクトにコピーし、scriptタグで実装します。従来のブラウザをサポートしている場合は、ES5バージョンの/dist/tornis.es5.jsを使用できます
|
1 |
<script src="path/to/tornis.js"></script> |
Tornisをロードすると、グローバル変数「window.__TORNIS」が作成され、監視機能にアクセスすることができます。
|
1 2 3 4 5 |
__TORNIS.watchViewport(updateValues); __TORNIS.unwatchViewport(updateValues); const state = __TORNIS.getViewportState(); |
基本的な使い方
関連するプロパティのいずれかが変更されると、監視されている関数は自動的に実行されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
// 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()関数に渡すことで、関数を登録することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
{ 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 } } } |
sponsors
