如何使这种视差效果在移动浏览器上起作用？

Question

我正在尝试基于此 codepen 创建视差效果：https://codepen.io/chaobu/pen/qsyhf

但是，在移动设备上，这不起作用。如何在移动浏览器上使用视差效果？

这里的Javascript好像不影响视差效果。我最初想将 javascript click 事件更改为 touch...，但这不起作用。我还尝试为背景图像和位置创建媒体查询：粘性；他们，这也不起作用。

HTML：

<section id="1">
                    <article>
                      <p class="title"><strong>OUR WORK</strong></p>
                      <a class="homelink" href="#"><p class="link">FULL PROJECT LIST</p></a>
                    </article>
                  </section>
                  <section id="2">
                    <article>
                      <p class="title"><strong>DRAWINGS</strong></p>
                      <a class="homelink" href="#"><p>CONTENT LINK</p></a>
                    </article>
                  </section>
                  <section id="3">
                    <article>
                      <p class="title"><strong>WHO WE ARE:</strong></p>
                      <a class="homelink" href="#"><p>CONTENT LINK</p></a>
                    </article>
                  </section>
                  <section id="4">
                    <article>
                      <p class="title"><strong>WHAT WE DO:</strong></p>
                      <a class="homelink" href="#"><p>CONTENT LINK</p></a>
                    </article>
                  </section>
                  <section id="5">
                    <article>
                      <h1>TITLE</h1>
                      <a class="homelink" href="#"><p>CONTENT LINK</p></a>
                    </article>
                  </section>
                </div>

CSS：

.wrapper {
  position: relative;
  box-shadow: 0 0 1em #333333;
}
.wrapper section {
  position: relative;
  background: #00477C;
}
.wrapper section article {
  width: 50%;
  margin: 0 auto;
  padding: 2em 0;
}
.wrapper section article p {
  margin-bottom: 1em;
}
.wrapper section article p:last-of-type {
  margin-bottom: 0;
}
.wrapper section:after {
  content: "";
  display: block;
  position: relative;
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
}

.img-src {
    position: fixed;
    background-position: center;
    -webkit-background-size: cover;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}
.wrapper section:nth-child(1):after {
  background-image: url("../img/test.jpg");
}
.wrapper section:nth-child(2):after {
  background-image: url("../img/test2.jpg");
}
.wrapper section:nth-child(3):after {
  background-image: url("../img/test3.jpg");
}
.wrapper section:nth-child(4):after {
  background-image: url("../img/test4.jpg");
}
.wrapper section:nth-child(5):after {
  background-image: url("../img/test.jpg");
}
.wrapper section:nth-child(6):after {
  background-image: url("../img/test2.jpg");
}

@media only screen and (max-width: 600px) {
  .wrapper section:nth-child(1):after {
    position: -webkit-sticky;
    top:65px;
    background-image: url("../img/test.jpg");
  }
  .wrapper section:nth-child(2):after {
    position: -webkit-sticky;
    background-image: url("../img/test2.jpg");
  }
  .wrapper section:nth-child(3):after {
    position: -webkit-sticky;
    background-image: url("../img/test3.jpg");
  }
  .wrapper section:nth-child(4):after {
    position: -webkit-sticky;
    background-image: url("../img/test4.jpg");
  }
  .wrapper section:nth-child(5):after {
    position: -webkit-sticky;
    background-image: url("../img/test.jpg");
  }
  .wrapper section:nth-child(6):after {
    position: -webkit-sticky;
    background-image: url("../img/test2.jpg");
  }
}

@media only screen and (max-width: 600px) {
  .wrapper section article {
    width: 80%;
  }
  .wrapper section:after {
    height: 100vh;
  }
}

我希望视差可以在移动设备上使用，但事实并非如此。有人可以帮忙吗？谢谢！

Answer 1

在许多移动浏览器上，视差效果无法按预期工作，或者根本无法工作。在 W3 上有一个非常基本的演示，可以看到 here。在您的移动浏览器中测试它，效果也可能会失败。对我来说确实如此。

我确实想提供一个替代方案。我的视差效果以及其他桌面浏览器也有类似的问题。我没有使用background-attachment: fixed，这会降低浏览器性能并且很可能是大多数移动浏览器不按预期解释的原因，而是使用jQuery 将背景的Y 轴与滚动值一起转换。这使图像保持在原位。

你可以找到我的解决方案here的实现。原始代码也包括在内，因此您可以对其进行调整以满足您的需求。 让我知道这是否对您有任何帮助。