1

レイヤー化された 5 つの div と、それらを横切って移動したい前景のオブジェクトがあります。これはパララックス効果を利用しています。jQuery で基本的な .animate を使用して、オブジェクトを正常に移動できました。

私が抱えている問題は、背景の div を適切にアニメーション化することです。トリガー div をクリックすると、オブジェクトが移動する前に div.cloud1 と div.cloud2 が移動します。タイミング値をいじっても、位置が変わります。

div 内のすべてのオブジェクトは絶対配置されます。div は、z-index を使用できるように相対的です。

具体的には、div.cloud1、div.cloud2、div.ground、div.Mountain をすべて異なる速度で移動して、3D の錯覚を与えようとしています。

送信しているオブジェクトは別の div です。

何が問題なのかわからない。

ここに私の JSfiddle があります: http://jsfiddle.net/U6Mu6/

 jQuery(document).ready(function () {
    jQuery('#cloud-01').css({
        backgroundPosition: '50 -180px'
    });
    jQuery('#cloud-02').css({
        backgroundPosition: '0 -100px'
    });
    jQuery('#mountains-03').css({
        backgroundPosition: '0 50px'
    });
    jQuery('#trees-04').css({
        backgroundPosition: '0 50px'
    });
    jQuery('#ground').css({
        backgroundPosition: 'left bottom'
    });
    jQuery('#branding').css({
        backgroundPosition: 'center 0'
    });
    jQuery('#content').css({
        backgroundPosition: 'center 0'
    });
    jQuery('#sec-content').css({
        backgroundPosition: 'center 0'
    });
    jQuery('#footer').css({
        backgroundPosition: 'center 0'
    });
    jQuery('#wrapper').css({
        overflow: "hidden"
    });

    jQuery('#klicker').click(function () {
        jQuery('#cloud-01').animate({
            backgroundPosition: '(-100px -10px)'
        }, 200000);
        jQuery('#cloud-02').animate({
            backgroundPosition: '(-400px 0px)'
        }, 20000);
        jQuery('#mountains-03').animate({
            backgroundPosition: '(-2500px 50px)'
        }, 20000);
        jQuery('#ground').animate({
            backgroundPosition: '(-5000px bottom)'
        }, 20000);

        startHim();

        jQuery("#full-robot").animate({
            left: "50%",
            marginLeft: "-150px"
        }, 2000);
        setTimeout("leaveScreen()", 15000);
    });

});

var num = 1;

function startHim() {
    num++;
    jQuery("#sec-content").animate({
        top: "-=5px"
    }, 150).animate({
        top: "+=5px"
    }, 150);
    jQuery("#content,#branding").animate({
        top: "-=" + num + "px"
    }, 150).animate({
        top: "+=" + num + "px"
    }, 150);
    if (num < 4) {
        setTimeout("startHim()", 300);
    } else {
        setTimeout("bounceHim()", 300);
    }
}

function bounceHim() {
    jQuery("#sec-content,#branding").animate({
        top: "-=4px"
    }, 150).animate({
        top: "+=4px"
    }, 150);
    jQuery("#content").animate({
        top: "-=8px"
    }, 150).animate({
        top: "+=8px"
    }, 150);
    setTimeout("bounceHim()", 300);
}

function leaveScreen() {
    jQuery("#full-robot").animate({
        left: "100%",
        marginLeft: "0px"
    }, 2000);
}

参考までに、フィドルのオブジェクトの一部は意図的に含まれていません。最初に物事を機能させたいだけです。

setTime 式の暗黙の eval を処理する JSFIDDLE でエラーが発生しました。しかし、それを修正する方法がわかりません。div を関数として渡し、代わりに .hide を使用できると思います。

すべてのヘルプを歓迎します。

編集：：：

私はこれを忘れました：

/**
* v. 1.02
*/
(function($) {
$.extend($.fx.step,{
'background-position': function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'background-position');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});

})(jQuery);// JavaScript ドキュメント

4

1 に答える 1

1

これがあまりにも明白かどうかはわかりませんが、"background-position"使用して雲の属性を設定しようとしていますbackgroundPosition

それらを次のように変更するだけかもしれません

$("#cloud-01").css({'background-position': '50px -180px'})

background-positionの代わりに注意してくださいbackgroundPosition

各雲が移動するのにかかる時間をずらしたい場合は、次のようにアニメーションの長さをオフセットする必要があります

    $('#cloud-01').animate({
        'background-position' : '(-100px -10px)'
    }, (1000) ); // 1 second duration
    $('#cloud-02').animate({
        'background-position' : '(-400px 0px)'
    }, (2000) ); // 2 seconds
    $('#mountains-03').animate({
        'background-position' : '(-2500px 50px)'
    }, (2000) ); // 3 seconds
于 2013-08-27T19:05:11.133 に答える