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

スクロールの速度に合わせたアニメーション、スクロールの位置に合わせたパララックス、マウスの位置・速度に合わせたパララックス、ビューポートのサイズに合わせたレイアウト変更などを実装するために、ビューポートを監視し、その状態を簡単に取得できる軽量JavaScriptライブラリを紹介します。

位置を取得できるのはよくありますが、速度まで取得できるのは珍しいですね。

サイトのキャプチャ

Tornis
Tornis -GitHub

Tornisの特徴

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

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

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

Tornisのデモ

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

サイトのキャプチャ

Tornis

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

Tornisの使い方

インストール

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

外部ファイル

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

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

基本的な使い方

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

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

sponsors

top of page

©2019 coliss