0

好的，所以这在过去的两天里给我带来了很大的痛苦和悲伤，我终于缩小了问题的范围，但还远远没有解决它。

我正在使用Skrollr插件构建视差网站。一旦有<!doctype html>礼物，该插件将在我的文档中停止运行。

我创建了一个新的简单示例，但它仍然产生相同的错误。

奇怪的是，在他们自己的网站上，他们声明的<!doctype html>和我一样，但它在那里有效。

我的代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>

    .section1{
        height:1000px;
        background:gray;
    }

    .section1 img {
        width:2000px;
        height:1000px;
    }

    .section2{
        width:2000px;
        height:1000px;
        background:url('background2.jpg');
        position: absolute;
    }

    .section3{
        width:2000px;
        height:1000px;
        background:url('background3.jpg');
    }

</style>
</head>
<body>

<section class="section1">
    <div style="position:absolute; background:url('background1.jpg') no-repeat; width:100%; height:1000px; background-size:cover;" data-0="top:0;" data-1200="top:350px;"></div>
</section>
<section class="section2"></section>
<section class="section3"></section>

<script src="skrollr.min.js"></script>
<script>
    var s = skrollr.init({
            edgeStrategy: 'set',
            easing: {
                WTF: Math.random,
                inverted: function(p) {
                    return 1-p;
                }
            }
        });
</script>

</body>
</html>
4

2 回答 2

2

您没有为top第一个关键帧的属性值指定单位。

你的：data-0="top:0;" 正确：data-0="top:0px;"

省略 时，浏览器会变得不那么严格，并在您设置为或类似DOCTYPE时假定您的意思是像素。top100

另见：https ://github.com/Prinzhorn/skrollr#limitations

所有数值必须具有相同的单位。从 0% 到 100px 的动画是不可能的。skrollr 不会抱怨，但结果是不确定的。

于 2013-07-25T18:24:38.587 回答
0

我无法发表评论，但我有一个问题。你能用你的 CSS 和 JS 发布一些 HTML，以便我们更好地查看。

请注意，您的代码与他们的代码有所不同，如果不是，那么从逻辑上讲，您的代码应该可以工作。

你有没有对照他们检查你的 CSS/JS 并确保没有搞砸？

于 2013-07-25T14:41:17.743 回答