以前から、このサイトのトップ絵をパララックス効果でマウスでグリグリ動くようにしていますが、この記事で紹介されているパララックスライブラリが、スマホの場合加速度センサで傾きを使ってアニメーションさせるというもので、面白そうだったのでやってみました。

デモ

スマホで見てください。手元のAndroidで動作確認しました。

手元のAndroidだと、アニメしてくれますが、ちょっとカクカクしています。

コード

以前のコードに手を加え、UAがスマートフォンの場合は加速度センサの値でアニメするようにします。

$(function() {
    var baseX = $('#parallaxImage').offset().left + 200;
    var baseY = $('#parallaxImage').offset().top  + 150;
    var layers = $('#parallaxImage').children().map(function(_, layer) {
        return {
            $: $(layer),
            factor:$(layer).data("z")/10000,
            baseX: $(layer).position().left,
            baseY: $(layer).position().top
        };
    });
    var isSmartphone = navigator.userAgent.search(/(iPhone|iPad|Android)/) !== -1;
    !isSmartphone && $(document.body).mousemove(function(ev) {
        var dx = ev.pageX - baseX;
        var dy = ev.pageY - baseY;
        $.each(layers, function(_, layer) {
            layer.$.css({
                left: layer.baseX + (dx*layer.factor) +"px",
                top:  layer.baseY + (dy*layer.factor) +"px" });
        });
    });
    // 今回追加したコード
    isSmartphone && window.addEventListener("devicemotion", function(ev){
        var dy = baseY/2 + ev.accelerationIncludingGravity.y*100;
        var dx = baseX/2 - ev.accelerationIncludingGravity.x*100;
        $.each(layers, function(_, layer) {
            layer.$.css({
                left: layer.baseX + (dx*layer.factor) +"px",
                top:  layer.baseY + (dy*layer.factor) +"px" });
        });
    });
});