Interdimensional

主にモバイル端末に対応した、デバイスの傾きでページをスクロールさせるJavaScriptのライブラリ［Interdimensional］を紹介します。

以下のリンク先より実装サンプルをテストできます。
iPhoneやiPad等、加速度センサー（モーションセンサーまたはジャイロセンサー）の機能が使えるデバイスでアクセスしてください。
左下のアイコンをタップして、アイコンが赤い状態になると［Interdimensional］の機能が有効化されます。
この状態でデバイスを傾けると、角度に応じてページがスクロールします。

［Interdimensional］：実装サンプル

お試しいただいたとおり、デバイス自体の「傾き」を検知してスムーズにページがスクロールします。
斬新で近未来的な新しいUIですね。

実装するのが難しそうに感じるかもしれませんが、実はとてもカンタンです。

まずは公式サイトから必要なファイルをダウンロードしてきましょう。

上記どちらのサイトからでも入手できますが、必要なファイルは２つだけ。

スクリプト本体の「interdimensional.js」とスタイルシートの「interdimensional.css」です。

この２つのファイルをHTMLの <head>〜<head> 内で読み込みます。
またこのとき、初期設定の Interdimensional.charge(); も同時に記述しておくと捗ります。

<link rel="stylesheet" href="interdimensional.css">
<script src="interdimensional.js"></script>
<script>
Interdimensional.charge();
</script>

他に必要な設定は……。

ありません！

わずか3〜5行のコードだけで実装可能。

また［Interdimensional］はjQuery等の他のライブラリに依存せず、単体で動きます。これも嬉しいポイントですね。

超カンタンに近未来的なUIを実装できる［Interdimensional］です。
新しく作るホームページに導入を検討してみてはいかがでしょうか。

［Interdimensional］：公式サイト