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中的元素。

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

1 个答案: