时间戳

首页 > 解决方案 > firewatch 视差效果与上面的另一个 div 内容

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

问题描述

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

感谢您的回复。

<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/

标签： javascripthtmlcsswebparallax

解决方案

尝试将您的叠加 div 设置为position:fixed

https://jsfiddle.net/zhyeubg8/

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

<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/

推荐阅读