

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

<http://ignition.co/104>

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


CC BY-SA 3.0
2014-12-04T04:15:41.567
341
2014-12-12T22:51:37.563
2014-12-12T22:51:37.563
30
85
question
javascript
スマートフォンの傾きに応じて背景画像を動かすJavaScriptライブラリはありますか？


`deviceorientation`イベントを使えば良いと思います。

[code]

    window.addEventListener('deviceorientation', function(e) {
      // e.alpha, e.beta, e.gamma で傾きを取得
    });
    
[/code]

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>


CC BY-SA 3.0
2014-12-05T04:56:37.203
361
2014-12-05T04:56:37.203
450
341
answer


**parallax.js**  
ISHITOYA Kentaroさんがコメントされているように、parallax.jsというライブラリがあります。
内部的には`DeviceOrientationEvent`を使っているようです。
[**公式サイト**](http://matthew.wagerfield.com/parallax/)

**html5rocks**  
また、html5rocksにサンプルが掲載されています。これも`DeviceOrientationEvent`が使われています。
[**サンプル**](http://www.html5rocks.com/en/tutorials/device/orientation/deviceorientationsample.html)

**ブラウザの互換性**  
`DeviceOrientationEvent`は、FirefoxとChromeで動作が異なるなどブラウザの互換性に注意が必要です。
[**MDN**](https://developer.mozilla.org/en-
US/docs/Web/API/DeviceOrientationEvent)

* * *

**DeviceOrientationに関する補足**

DeviceOrientationEventには、座標軸に応じて3つの値があります。

> x軸 : beta 度 [-180 ～ 180]  
>  y軸 : gamma 度 [-90 ～ 90]  
>  z軸 : alpha 度 [0 ～ 360]  
>

また、次のような処理の流れになります。

> (1) DeviceOrientationEventのイベントを拾う  
>  (2) X軸、Y軸、Z軸の傾きの値を取得する  
>  (3) 座標値を好みの値に調節する  
>  (4) 画像の位置を調節する  
>

動作の仕組みを知るために、荒っぽく骨格の部分だけ数行で書くと以下のような感じです。

[code]

    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がサポートされていません
    }
    
[/code]

[jsfiddle ソースコード](http://jsfiddle.net/naokiota/ysad8cnu/)  
[jsfiddle 動作確認用](http://jsfiddle.net/naokiota/ysad8cnu/embedded/result/)

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


CC BY-SA 3.0
2014-12-05T12:28:39.173
375
2014-12-12T12:54:12.947
2014-12-12T12:54:12.947
47
47
341
answer