直リンクで申し訳ないのですが、iPhone等のスマートフォンで下記のサイトにアクセスすると、スマートフォンの傾きに応じて背景画像がゆらゆらと動くようになっています。
このような効果はjQueryか何かのライブラリで実現しているのでしょうか? そういったライブラリをご存知の方がいれば教えてください。
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加する直リンクで申し訳ないのですが、iPhone等のスマートフォンで下記のサイトにアクセスすると、スマートフォンの傾きに応じて背景画像がゆらゆらと動くようになっています。
このような効果はjQueryか何かのライブラリで実現しているのでしょうか? そういったライブラリをご存知の方がいれば教えてください。
deviceorientation
イベントを使えば良いと思います。
window.addEventListener('deviceorientation', function(e) {
// e.alpha, e.beta, e.gamma で傾きを取得
});
MDNに詳しい説明があります。
https://developer.mozilla.org/ja/docs/Detecting_device_orientation https://developer.mozilla.org/ja/docs/DOM/Orientation_and_motion_data_explained
質問で挙げられているサイトではdevicemotion
イベントを使っているようですが、こちらは使ったことがないので詳しいことはわかりません。
https://developer.apple.com/library/iad/documentation/SafariDOMAdditions/Reference/DeviceMotionEventClassRef/DeviceMotionEvent/DeviceMotionEvent.html
parallax.js
ISHITOYA Kentaroさんがコメントされているように、parallax.jsというライブラリがあります。
内部的にはDeviceOrientationEvent
を使っているようです。
公式サイト
html5rocks
また、html5rocksにサンプルが掲載されています。これもDeviceOrientationEvent
が使われています。
サンプル
ブラウザの互換性
DeviceOrientationEvent
は、FirefoxとChromeで動作が異なるなどブラウザの互換性に注意が必要です。
MDN
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 動作確認用
以上です。参考になれば幸いです。