5

直リンクで申し訳ないのですが、iPhone等のスマートフォンで下記のサイトにアクセスすると、スマートフォンの傾きに応じて背景画像がゆらゆらと動くようになっています。

http://ignition.co/104

このような効果はjQueryか何かのライブラリで実現しているのでしょうか? そういったライブラリをご存知の方がいれば教えてください。

1

2 件の回答 2

4

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

3

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 動作確認用

以上です。参考になれば幸いです。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。