[JS]面白いスクリプトが登場！スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny
Post on:2019年1月21日
sponsors
スマホの傾きを感知し、それに合わせてグラデーションを光の反射のようにシミュレートさせる軽量スクリプトを紹介します。
スクリプトは単体で動作し、MITライセンスで利用できます。
Shinyのデモ
デモは傾きに対応したデバイスでご覧ください。
現時点では、iPhoneの縦向きモードがベストとのことです。
GitHubに傾きに対応してグラデーションが変化する様子が掲載されていました。
当方のiPhoneでも試してみました。
下記は静止画ですが、傾きに対応してリアルタイムに変化します。
左から、正位置、左傾け、右傾け
デスクトップで見るなら、スマホのシミュレーターでも大丈夫です。
シミュレーターで表示
※Chrome デベロッパーツールのSensors
Shinyの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 2 3 4 5 6 |
<body> ... コンテンツ ... <script src="shiny.umd.js"></script> </body> |
Step 2: HTML
傾きを感知する要素に.my-shiny-elementを加えます。
|
1 |
<div class="my-shiny-element">Hello World</div> |
Step 3: JavaScript
初期化し、オプションを定義して、スクリプトを実行します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<script> shiny('.my-shiny-element', { // レンダリングするタイプを定義 // 'background', 'border', or 'text' type: 'background', gradient: { // グラデーションのタイプを定義 // 'linear' or 'radial' type: 'radial', // linearを定義した場合は角度も定義 angle: '110deg', // フリップ軸移動 flip: { x: true, y: false }, // 使用するカラーの定義 colors: [ // offset, color, opacity // ! RGBやHslaは使用せず、不透明度を個別に定義 [0, '#fff', 1], // 0%でホワイト [1, '#fff', 0], // 100％で完全に透明なホワイト ] }, // オプション: パターン塗りつぶし pattern: { type: 'noise', // 現在のところnoiseのみ opacity: .5 } }); </script> |
sponsors
