【JavaScript】デバイスの傾きでページをスクロールさせる[Interdimensional]の使い方。Tags【JavaScript】デバイスの傾きでページをスクロールさせる[Interdimensional]の使い方。ONZEhttps://on-ze.com/archives/2598HomeBlog【JavaScript】デバイスの傾きでページをスクロールさせる[Interdimensional]の使い方。Google主にモバイル端末に対応した、デバイスの傾きでページをスクロールさせるJavaScriptのライブラリ[Interdimensional]を紹介します。以下のリンク先より実装サンプルをテストできます。iPhoneやiPad等、加速度センサー(モーションセンサーまたはジャイロセンサー)の機能が使えるデバイスでアクセスしてください。左下のアイコンをタップして、アイコンが赤い状態になると[Interdimensional]の機能が有効化されます。この状態でデバイスを傾けると、角度に応じてページがスクロールします。[Interdimensional]:実装サンプルお試しいただいたとおり、デバイス自体の「傾き」を検知してスムーズにページがスクロールします。斬新で近未来的な新しいUIですね。実装するのが難しそうに感じるかもしれませんが、実はとてもカンタンです。公式サイトから必要なファイルをダウンロードしてきましょう。InterdimensionalGitHub上記どちらのサイトからでも入手できますが、必要なファイルは2つだけ。スクリプト本体の「interdimensional.js」とスタイルシートの「interdimensional.css」です。同時に記述しておくと捗ります。src="interdimensional.js"></script><script>Interdimensional.charge();</script>他に必要な設定は......。ありません!わずか3〜5行のコードだけで実装可能。[Interdimensional]はjQuery等の他のライブラリに依存せず、単体で動きます。これも嬉しいポイントですね。超カンタンに近未来的なUIを実装できる[Interdimensional]です。新しく作るホームページに導入を検討してみてはいかがでしょうか。[Interdimensional]:公式サイトTwitterFacebookGoogle+FeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【JavaScript】ページの背景にポリゴン状の幾何学模様を描画する[particles.js]の使い方。【JavaScript】フォームの進捗をシンプルなプログレスバーで表示するスクリプト[Fort.js]が便利です。【PHP】コピーライトの年号の表記を書き換えるのが面倒!...そんなとき。【JavaScript】リンクの元のページに戻る、ブラウザの「戻る」ボタンと同じ動作。JavaScriptが無効な環境でのスタイルシートの読み込み【jQuery】背景色を複数のグラデーションで彩るプラグイン「Shards」の実装方法。