だぶだぶノート

加速度センサーを使用してスマホの傾きを検出し、
その動きからメニューを表示するライブラリを公開しました。

だぶチルト
http://dabtilt.wi-wi.jp/

ほとんどの処理をCSSでつくることになるため、CSS3のアニメーション定義が必要ですが、
アニメーション関連は２行くらいしかないため、
今までのスタイルシート（CSS2.1）を理解している人なら、すぐに理解できると思います。
スクリプトの書き方は、スクリプトファイルを読み込んで、どの傾き方向とどの要素を結びつけるかを指定するだけです。

<style type="text/css">
#menu { position: absolute; } /* iOS5（iPhone）はfixedにも対応しています。 */
.open { display: block; }
.close { display: none; }
</style>

<div id="menu" class="close">
<ul>
<li><a href="">メニュー1</a></li>
<li><a href="">メニュー2</a></li>
<li><a href="">メニュー3</a></li>
</ul>
</div>

<script type="text/javascript" src="dabtilt.js">
<script type="text/javascript">
DabTilt.Tilt("right", "menu", "open", "close");
</script>

アニメーションさせる方法はだぶチルトのページにくわしく書く予定です。

iPhoneからはショートURL http://cise.jp/D002 にアクセスするとサンプルページに入れます。

今後は加速度センサーだけでなく、ジャイロセンサーも利用してより確実な角度検出を行います。
また、classの変更、コールバック関数の呼び出しだけですが、フリックスクロールの代わりにできるような、スクロール機能も付けようと思います。