修正背景图像 - skrollr

Question

我创建视差类似于此示例：

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

我想上滚动显示的第三图像是固定的背景图像和不移动总之，喜欢跟女孩大约一半下来的太阳镜此页上：

http://pollenlondon.com/prism/

我试图消除变换风格，加入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%，然后在#skrollr-body之外的&以上的每个图像组中删除应用于html代码中的额外高度类。这不是关键，但它会清理你的代码。

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

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