0

我试图用 skrollr 制作动画，但是当背景图像发生变化时，它们会消失一小段时间，有时当服务器延迟一秒钟时，它们会完全消失，直到我再次前后滚动。

这是我使用的代码：

@-skrollr-keyframes name {
    1100 {background: url(img/heads/picture1.png) no-repeat;}
    1101 {background: url(img/heads/picture2.png) no-repeat;}
}

顺便说一句：包含背景图像的 div 位于移动的 div 中。有什么办法可以解决这个问题？

编辑：每个动画的背景图像都在闪烁！

PS：对不起我的英语不好，我是德国人。

4

1 回答 1

0

首先，从 skrollr 的文档来看，skrollr 不知道如何在图像之间设置动画。要解决此问题，您需要在 url 的 css 属性之前添加一个感叹号，如下所示

background: !url(img/heads/picture1.png) no-repeat;

在此处查看源代码

对于闪烁的图像，请考虑在 DOM 上渲染任何内容之前预加载所有图像。尝试这个，

var images = new Array()
        function preload() {
            for (i = 0; i < preload.arguments.length; i++) {
                images[i] = new Image()
                images[i].src = preload.arguments[i]
            }
        }
        preload(
            "img-path/imagename.jpg",
            "img-path/imagename.jpg",
            "img-path/imagename.jpg",
            "img-path/imagename.jpg",
            "img-path/imagename.jpg"
        )

希望对你有帮助，祝你好运！

于 2014-10-10T14:50:01.753 回答