如何使這種視差效果在移動瀏覽器上起作用？

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

視差滾動在移動設備上的工作方式有所不同。 它可能很慢，或者根本不起作用。 Android設備運行緩慢，而iOS設備僅在滾動停止后才運行。 在此處閱讀更多信息。

Answer 2

在許多移動瀏覽器上，視差效果並沒有達到預期效果，或者根本沒有效果。 在W3上有一個非常基本的演示，可以在這里看到。 在您的移動瀏覽器中進行測試，效果可能也會失敗。 它肯定是對我的。

我確實想提供一個替代方案。 我的視差效果以及其他桌面瀏覽器也遇到了類似的問題。 而不是使用background-attachment: fixed ，這會降低瀏覽器的性能，並且很可能是大多數移動瀏覽器無法按預期解釋此問題的原因，我使用jQuery通過滾動來平移背景的Y軸值。 這樣可以將圖像固定在適當的位置。

您可以在此處找到我的解決方案的實現。 原始代碼也包括在內，因此您可以對其進行調整以滿足您的需求。 讓我知道這是否對您有幫助。