[英]How to Add a Parallax Image Inside a Parallax Row
我正在尝试实现一个视差,其中包含另一个图像,其中还具有视差效果,使它们都以不同的速度移动。
我取得了一些成功,但它似乎只能在比816px更窄的屏幕上工作,这就是我滚动到该区域时的样子:
这是宽度超过816px时的样子:
不确定是否有人能够专门帮助解决这个问题,但是很想知道是否有“正确”的方法来实现这一点,或者是否有任何实现/插件可用。
我在网站的其余部分使用了引导框架(感觉到响应能力将内部图像压低了)。
这是代码:
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的
我从这里使用Parallax.js
插件
对此有任何帮助非常感谢,如果我能提供更多详细信息,请告诉我。
我能够通过将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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.