Blog

jQueryとWebフォントでスマホの傾きで色の変わるアイコンを作ってみる

2014.02.04Cat:javascript jQuery デザイナー

HTML5では、デバイスの傾きや加速度といったスマホやタブレット端末独特のセンサーの情報を

JavaScriptで読み取ることが可能です。

古い機種などでは対応していない場合もありますが、

スマホやタブレット端末でのインターネット利用がとても多くなっている今、

こういったPCにはなかった情報を利用することも表現方法を模索する上で無視できなくなってきています。

 

今回はその情報のひとつである、重力加速度(デバイスの傾き)を読み取って、

色が変化するアイコンを、jQueryとWebフォントを利用して作ってみました。

 

ちなみにこの重力加速度(デバイスの傾き)は、iOS4.2 Android 3 以上で利用可能です。

(Android2.3系でも、最新のfirefoxなど、利用可能なブラウザもあります。)

 

↓こちらが作ってみたもの(iOS4.2 Android 3 以上のスマホ、タブレット端末で見られます)

DEMO

QRコード

 

方法

まずはWebフォントのアイコンを用意します(詳しくはこちら)。

HTMLでWebフォントを適用した要素を配置します。

HTML

今回は’s’にアイコンをあてはめています。

 

 CSS

 

JavaScriptでデバイスの動きのイベントが発生する度に、重力加速度(デバイスの傾き)を読み取ります。

そしてこの値をcolorにあてはめて色を変えます。

重力加速度はおおよそ-9.8〜+9.8の値を取るようですので、

255 ÷ 9.8 ≒ 26 ですので、重力加速度を26で割った値をrgbそれぞれにあてはめます。

今回はこのままだと若干暗めの色になってしまうため、さらにその値と255の平均値を使いました。

JavaScript

 

今回作ったものはかなり大きく傾けないと色の変化がわかりづらいですが、

応用すればアクセントなどに使うことができるかもしれません。

 

 

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ