読者です 読者をやめる 読者になる 読者になる

MANA-DOT

PIXEL ART, PROGRAMING, ETC.

加速度センサーでパララックス効果

ドット絵 JavaScript プログラミング

parallax_top

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

デモ

スマホで見てください。手元の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" });
        });
    });
});

devicemotion イベントのイベントオブジェクトのaccelerationIncludingGravityプロパティの値にデバイスの傾きが入ってくるようで、この値をオフセットにして各パーツを中心からずらしてあげます。

参考にしたサイト