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问题原因是你不应该使用＆＃34; background-position＆＃34;，但是＆＃34; backgroundPosition＆＃34;

见这里：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上测试了以下解决方案。

你必须同时添加＆＃34;背景位置＆＃34;和＆＃34; backgroundPosition＆＃34;

此代码应该有效：

＆＃13;

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

＆＃13;

希望TweenMax能够解决这个问题，因为我不知道是否存在任何不利因素。

Firefox和IE中的背景位置动画问题

2 个答案: