parallax.js视差-滑块视差内容和图像

Question

http://pixelcog.github.io/parallax.js/

你好，世界！我对上面的插件有一个问题。我已经设法做了几个视差背景，并且可以用内容填充它们，没有问题，但是文档中提到可以使用视差图层类对内容使用视差效果，当我将其添加到我的代码中时，整个部分都是空白的。当我删除视差层div时，我的代码再次工作，但最终我希望使用视差效果来影响内容，就像我对图像所做的那样。有人知道我做错了什么吗？谢谢:)

这是html..。

<div class="parallax-window" data-parallax="scroll" data-image-src="background.jpg" style="padding:20px 30px;">
    <div class="parallax-slider">
<h1 style="color:rgba(255,255,255,1);font-size:10vw;margin:0;padding:0;text-shadow:-10px 10px 15px rgba(20,0,20,1);">Wally Gunn</h1>
    </div>
</div>

还有css..。

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

我还把这个脚本贴在了我的身体底部

<script>
$('.parallax-window').parallax({
naturalWidth: 600,
naturalHeight: 400});
</script>

Answer 1

我解决了这个问题。使用：

<div class="parallax-window" data-parallax="scroll" data-image-src="https://tse1-mm.cn.bing.net/th?id=OIP.3iTMNkANw-FFI-x8vJqD4wHaDF&p=0&o=5&pid=1.1" data-z-index="-1">
    <div class="text">
        <h1>Simple Parallax Scrolling</h1>
    </div>
</div>

记住将data-z-index设置为-1，parallax-window中的元素将会显示出来。