0

我是一名设计师转为开发人员，致力于学习视差。我做了这个测试，它在 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/

4

2 回答 2

0

TweenMax 似乎存在错误。我不知道解决方案，但我找到了解决方法。

我在 Chrome、IE 和 Firefox 上测试了以下解决方案。

您必须同时添加“背景位置”和“背景位置”

此代码应该可以工作：

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

希望 TweenMax 修复了这个错误，因为我不知道同时包含两者是否有任何缺点。

于 2014-10-24T15:34:54.437 回答
0

这实际上是一个 TweenMax 问题。
原因是你不应该使用“background-position”，而是“backgroundPosition”

见这里： http: //greensock.com/forums/topic/8394-firefox-animating-background-position/

如需未来帮助，请遵循本指南：https ://github.com/janpaepke/ScrollMagic/blob/master/CONTRIBUTING.md

于 2014-08-11T11:19:21.130 回答