【JavaScript】デバイスの傾きでページをスクロールさせる[Interdimensional]の使い方。

Ads by Google

Interdimensional

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

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

[Interdimensional]:実装サンプル

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

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

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

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

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

この2つのファイルを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]:公式サイト

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google