firewatch 视差效果与上面的另一个 div 内容

Question

我正在努力寻找一种方法来设置山脉的视差效果......在页面顶部和带有网站内容的 div 下方。我已经尝试过使用 z-index 和 position，但还没有达到。

感谢您的回复。

<div id="parallax">
<img class="scene" data-modifier="30" src="https://s.electerious.com/parallaxscene/p0.png">
<img class="scene" data-modifier="18" src="https://s.electerious.com/parallaxscene/p1.png">
<img class="scene" data-modifier="12" src="https://s.electerious.com/parallaxscene/p2.png">
<img class="scene" data-modifier="8" src="https://s.electerious.com/parallaxscene/p3.png">
<img class="scene" data-modifier="6" src="https://s.electerious.com/parallaxscene/p4.png">
<img class="scene" data-modifier="0" src="https://s.electerious.com/parallaxscene/p6.png">
</div>
<div id="test">
    <font color="red">This is some text!asdfasd</font>
</div>

document.querySelectorAll('.scene').forEach((elem) => {

    const modifier = elem.getAttribute('data-modifier')

    basicScroll.create({
        elem: elem,
        from: 0,
        to: 519,
        direct: true,
        props: {
            '--translateY': {
                from: '0',
                to: `${ 10 * modifier }px`
            }
        }
    }).start()

})

body {
    height: 2000px;
    background: black;
}

.scene {
    position: absolute;
    width: 100%;
    transform: translateY(var(--translateY));
    will-change: transform;
}

https://jsfiddle.net/ufcqw2xh/

Answer 1

尝试将覆盖 div 设置为 position:fixed

https://jsfiddle.net/zhyeubg8/

编辑： 如果您希望您的测试 div 与山脉一起滚动，只需将其移动到您的视差div 内，将data-modifier 指定为您希望它滚动的图层，并使用 CSS 定位它。

<div id="parallax">
<img class="scene" data-modifier="30" src="https://s.electerious.com/parallaxscene/p0.png">
<img class="scene" data-modifier="18" src="https://s.electerious.com/parallaxscene/p1.png">
<img class="scene" data-modifier="12" src="https://s.electerious.com/parallaxscene/p2.png">
<img class="scene" data-modifier="8" src="https://s.electerious.com/parallaxscene/p3.png">
<img class="scene" data-modifier="6" src="https://s.electerious.com/parallaxscene/p4.png">
<img class="scene" data-modifier="0" src="https://s.electerious.com/parallaxscene/p6.png">
<div id="test" class="scene" data-modifier="0">
    <font color="red">This is some text!asdfasd</font>
</div>
</div>

#test {
  position: relative;
  text-align: center;
  top: 50vh;
}

https://jsfiddle.net/ghmo629v/