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

Background-Position animation issue in Firefox and IE

本文关键字：位置 动画 问题 背景 IE Firefox      更新时间：2023-09-26

我是一名设计师出身的开发人员，致力于学习视差。我做了这个测试，它在Chrome上运行得很好，但在FireFox或IE中没有。有什么建议吗？

我使用的是ScrollMagic，它是建立在GSAP上的。

这是我的脚本

$(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/

这实际上是一个TweenMax问题
原因是你不应该使用"背景位置"，而应该使用"后台位置">

请参见此处：http://greensock.com/forums/topic/8394-firefox-animating-background-position/

有关未来的帮助，请参阅本指南：https://github.com/janpaepke/ScrollMagic/blob/master/CONTRIBUTING.md

TweenMax似乎有一个错误。我不知道解决办法，但我找到了解决办法。

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

你必须添加"背景位置"answers"背景位置">

这个代码应该工作：

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

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

相关文章：