Firefox和IE中的背景位置動畫問題

Question

我是一名轉向開發人員的設計師，致力於學習視差。 我進行了此測試，它在Chrome上效果很好，但在FireFox或IE中效果不佳。 有什么建議么？

我正在使用基於GSAP構建的ScrollMagic。

這是我的劇本

$(document).ready(function($) {
    // build tween
    var tween = TweenMax.fromTo("#clouds2", 5, 
            {"background-position": "50% 0px"},
            {"background-position": "50% 2500px"}
        );

    // build scene
    var scene = new ScrollScene({triggerElement: "#container", duration: 3000})
                    .setTween(tween)
                    .addTo(controller);

    // show indicators (requires debug extension)
    scene.addIndicators();
});

http://joeyellisdesign.com/testingspace/parallaxtest/test/

Answer 1

這實際上是一個TweenMax問題。
原因是您不應該使用“ background-position”，而是“ backgroundPosition”

看到這里： http : //greensock.com/forums/topic/8394-firefox-animating-background-position/

如需將來的幫助，請遵循此指南： https : //github.com/janpaepke/ScrollMagic/blob/master/CONTRIBUTING.md

Answer 2

TweenMax似乎有一個錯誤。 我不知道解決方案，但是找到了解決方法。

我在Chrome，IE和Firefox上測試了以下解決方案。

您必須同時添加“ background-position”和“ backgroundPosition”

此代碼應工作：

 var tween = TweenMax.fromTo("#clouds2", 5, {"background-position": "50% 0px", "backgroundPosition": "50% 0px"}, {"background-position": "50% 2500px", "backgroundPosition": "50% 2500px"} ); 

希望TweenMax能夠修復該錯誤，因為我不知道同時包括這兩個缺點。