Question

我试图用skrollr做动画，但是当背景图像改变时它们会消失很短的时间，有时当服务器滞后一秒时它们会完全消失，直到我再次向后滚动。

使用以下代码：

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

BTW：包含背景图像的div位于移动div内。有什么方法可以解决这个问题吗？

编辑：每个动画的背景图片都闪烁着很多！

PS：抱歉我的英文不好，我是德国人。

Answer 1

首先，从skrollr的文档中，skrollr不知道如何在图像之间制作动画。要处理这个问题，你需要在url的css属性之前添加一个感叹号，如下所示

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

请参阅来源here

对于闪烁的图像，请考虑在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"
        )

希望它有所帮助，祝你好运！

更改后，Skrollr背景图像消失

1 个答案: