質問: 直リンクで申し訳ないのですが、iPhone等のスマートフォンで下記のサイトにアクセスすると、スマートフォンの傾きに応じて背景画像がゆらゆらと動くようになっています。 このような効果はjQueryか何かのライブラリで実現しているのでしょうか? そういったライブラリをご存知の方がいれば教えてください。
回答: **parallax.js** ISHITOYA Kentaroさんがコメントされているように、parallax.jsというライブラリがあります。 内部的には`DeviceOrientationEvent`を使っているようです。 **公式サイト** **html5rocks** また、html5rocksにサンプルが掲載されています。これも`DeviceOrientationEvent`が使われています。 **サンプル** **ブラウザの互換性** `DeviceOrientationEvent`は、FirefoxとChromeで動作が異なるなどブラウザの互換性に注意が必要です。 **MDN** **DeviceOrientationに関する補足** DeviceOrientationEventには、座標軸に応じて3つの値があります。 > > x軸 : beta 度 [-180 ~ 180] > > y軸 : gamma 度 [-90 ~ 90] > > z軸 : alpha 度 [0 ~ 360] > > > > また、次のような処理の流れになります。 > > (1) DeviceOrientationEventのイベントを拾う > > (2) X軸、Y軸、Z軸の傾きの値を取得する > > (3) 座標値を好みの値に調節する > > (4) 画像の位置を調節する > > > > 動作の仕組みを知るために、荒っぽく骨格の部分だけ数行で書くと以下のような感じです。 ``` if (window.DeviceOrientationEvent) { // (1) DeviceOrientationEventのイベントを拾う window.addEventListener("deviceorientation", function () { // (2) X軸、Y軸の傾きの値を取得する var x = Math.round(event.beta || 0); // [-90, 90) var y = Math.round(event.gamma || 0); // [-180, 180) // (3) 座標値を好みの値に調節する(省略) // (4) 画像の位置を調節する $('#contentarea').css({'background-position-x':x, 'background-position-y':y}); }, true); }else{ // DeviceOrientationEventがサポートされていません } ``` jsfiddle ソースコード jsfiddle 動作確認用 以上です。参考になれば幸いです。