通过Parallax.js的多层视差

问题描述

我已经将parallax.js用于许多项目，并且我非常喜欢将其用于简单的背景图像。但是，我试图弄清楚如何将其用于多层效果（背景/中间背景/前景）。我无法弄清楚如何在一个parallax-window中包含多个视差层。我尝试在一个窗口中制作两个parallax-sliders，然后将它们彼此绝对定位，但这没有用（请参见代码）。

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

body,html{
    margin: 0px;
    padding: 0px;
}

.hero-wrap{
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.parallax-window {
    background: transparent;
    position: absolute;
    min-height: 100vh;
    min-width: 100vw;
}

<div class="parallax-window hero-wrap">
  <div class="parallax-slider" data-speed="0.2">
    <img src="images/hero-bg.png">
  </div>

  <div class="parallax-slider" data-speed="0.5">
    <img src="images/hero-fg.png">
  </div>

  <h1>FLOATING TEXT</h1>
</div>

如何实现此目标（如果使用此插件甚至可能/可行）？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）