How can I make this parallax effect work on mobile browsers?

Question

I'm trying to create a parallax effect based on this codepen: https://codepen.io/chaobu/pen/qsyhf

However, on mobile, this does not work. How can I have the parallax effect work on mobile browsers?

It seems that the Javascript here does not affect the parallax effect. I initially thought to change the javascript click event to touch..., however that did not work. I also tried creating a media query for the background images and position: sticky; them, and that did not work either.

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;
  }
}

I expected the parallax to work on mobile, however it does not. Could anyone help out with this? Thanks!

Not really an answer but related for people interested in a performant parallax implementation: https://developers.google.com/web/updates/2016/12/performant-parallaxing — seahorsepip, Aug 01 '19 at 21:05
On phone, traditional parallax approach will not work, or it will but it will be very slow. — SuperSimplePimpleDimple, Aug 01 '19 at 21:10

score 0 · Answer 1 · answered Aug 01 '19 at 21:51

On a lot of mobile browsers, the parallax effect doesn't work as intended, or at all. There's a very basic demo on W3 which can be seen here. Test it out in your mobile browser and the effect might fail as well. It certainly did on mine.

I do want to provide an alternative though. I've had similar issues on my parallax effect, as well as on other desktop browsers. Instead of using background-attachment: fixed, which is killing browser performance and might very well be the reason why most mobile browsers don't interpret this as intended, I've used jQuery to translate the Y-axis of the background with the scroll value. This keeps the image in place.

You can find the implementation of my solution here. The original code is also included, so you might be able to tweak it to fit your needs. Let me know if this was helpful in any way.

How can I make this parallax effect work on mobile browsers?

1 Answers1