[JS]面白いスクリプトが登場!スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny

スマホの傾きを感知し、それに合わせてグラデーションを光の反射のようにシミュレートさせる軽量スクリプトを紹介します。

スクリプトは単体で動作し、MITライセンスで利用できます。

サイトのキャプチャ

Shiny
Shiny -GitHub

Shinyのデモ

デモは傾きに対応したデバイスでご覧ください。
現時点では、iPhoneの縦向きモードがベストとのことです。

デモのキャプチャ

Shinyデモページ

GitHubに傾きに対応してグラデーションが変化する様子が掲載されていました。

当方のiPhoneでも試してみました。
下記は静止画ですが、傾きに対応してリアルタイムに変化します。

デモのキャプチャ

左から、正位置、左傾け、右傾け

デスクトップで見るなら、スマホのシミュレーターでも大丈夫です。

デモのキャプチャ

シミュレーターで表示
※Chrome デベロッパーツールのSensors

Shinyの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

Step 2: HTML

傾きを感知する要素に.my-shiny-elementを加えます。

Step 3: JavaScript

初期化し、オプションを定義して、スクリプトを実行します。

sponsors

top of page

©2019 coliss