如何在视差行内添加视差图像

Question

我正在尝试实现一个视差，其中包含另一个图像，该图像也具有视差效果，它们都以不同的速度移动。

我取得了一些成功，但它似乎只适用于小于 816 像素的屏幕，这是我滚动到该区域时的样子：

下面是宽度超过 816px 时的样子：

不确定是否有人能够为此提供具体帮助，但很想知道是否有 "right" 方法可以实现此目的，或者是否有任何 implementations/plugins 可用。

我正在为网站的其余部分使用 bootstrap 框架（感觉响应能力正在压低内部图像）。

代码如下：

html

<div class="container-fluid" style="padding:0px;">
    <div class="parallax-window" 
         data-parallax="scroll" 
         data-image-src="Phonehand.png"
         data-position-y="500px"
         data-speed="0.3">
        <div class="parallax-window" data-parallax="scroll" data-image-src="Chrysanthemum.jpg" data-speed="0.8" >
        </div>
    </div>      
</div>

css

.parallax-window {
    width: 100%;
    min-height: 400px;
    background: transparent;    
}

javascript

我正在使用来自 here

的 Parallax.js 插件

非常感谢您对此提供任何帮助，如果我可以提供更多详细信息，请告诉我。

Answer 1

我可以通过将 data-position-y 更改为 100px 来解决此问题：

<div class="container-fluid" style="padding:0px;">
<div class="parallax-window" 
     data-parallax="scroll" 
     data-image-src="Phonehand.png"
     data-position-y="100px"
     data-speed="0.3">
    <div class="parallax-window" data-parallax="scroll" data-image-src="Chrysanthemum.jpg" data-speed="0.8" >
    </div>
</div>

如何在视差行内添加视差图像

How to Add a Parallax Image Inside a Parallax Row

javascript

jquery

css

twitter-bootstrap

parallax