Question

我正在创建一个类似于这个例子的视差：

http://prinzhorn.github.io/skrollr/examples/classic.html

我希望滚动上显示的第三张图片是一张固定的背景图片而根本不会移动，就像在这个带有太阳镜大约一半的女孩的页面上一样：

我尝试删除转换样式并添加background-attachment:fixed但不起作用。有什么想法吗？

谢谢！

Answer 1

只需引用经典示例html页面中显示的确切代码，您需要更改几个值，如下所示：

<div
    class="parallax-image-wrapper parallax-image-wrapper-100"
    data-anchor-target="#kittens + .gap"
    data-bottom-top="transform:translate3d(0px, 200%, 0px)"
    data-top-bottom="transform:translate3d(0px, 0%, 0px)">

    <div
        class="parallax-image parallax-image-100"
        style="background-image:url(images/kitteh3.jpg)"
        data-anchor-target="#kittens + .gap"
        data-bottom-top="transform: translate3d(0px, -100%, 0px);"
        data-top-bottom="transform: translate3d(0px, 100%, 0px);"
    ></div>
</div>

您将parallax-image-wrapper和parallax-image高度值更改为100而不是50.老实说，我认为包装器或bg图像的高度为50％没有任何好处本身。也许有一个我失踪的原因，但我希望有人希望bg图像跨越视口的整个高度，因为暴露的间隙会在它上面移动。

因此，我只是将这两个类设置为我的样式中的height:100%，然后删除html代码中应用的额外高度类，以及上面的每个图像组。在#skrollr-body之外。这样做并不重要，但它会稍微清理你的代码。

然后，将{3}的data-bottom-top属性更改为translate3d的200％y轴值，以反映您在前两个图像组中看到的内容。

最后，将parallax-image-wrapper的y轴transform3d值从-60％/ 60％更改为-100％/ 100％。这将导致bg图像保持静态，因为暴露的间隙在其上方滚动并使其看起来是固定的。

修复缺口中的背景图像 - skrollr

1 个答案: