Parallax effect is not working on mobile

Asked

Viewed 1,324 times

1

I’m developing a new website here from the company http://teste.softlove.us/

And everything is working (effects and sizes), I’m using Bootstrap and jQuery, except in mobile that in Home and About Us has the Parallax effect.

The same does not work on any mobile device... someone can help me ?

  /* formata elementos que tem backgrounds parallax */
.bgParallax {
  color:#FFF;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  position: relative;
  min-height: 1000px; 
  background-position: 50% 0;
  background-attachment: fixed;
}
 
/* Define backgrounds dos divs */
#quemsomos {
  background-image: url(http://teste.softlove.us/assets/img/home/bg_usa2.png);
 }
<div id="quemsomos" class="bgParallax" data-speed="15">
  <p>EXEMPLO</p>
  </div>

The problem is that by testing the browsers in the resolution of the mobile device x it appears to work. But when testing on the device nothing happens :(

What can cause this?

jquery html css

  • I checked that the effect Parallax is working on your site. I accessed by an iphone 5. As you did?

  • I used without js, I made in the nail the effect in css

  • What solution did you use? Could you show it?? Pfv haha

2 answers

1


Mobile devices do not detect scrolling in the same way as browsers.

Probably when you test on the phone, the effect only happens when the animation of the browser scrolling comes to an end.

One tip is to use modernizr to detect if the browser supports touch events. If it does not support (desktop browsers) you apply the javascript of Parallax, and if it supports (mobile browsers) you do not apply and can let the image be displayed otherwise.

  • hello @Dian , unfortunately I don’t know how to use the modernizr yet... but I understood its placement...

  • 1

    @Rafaelrotiroti, to use modernizr in this case, just go to https://modernizr.com/download and choose "Touchevents" from the list. Click the "Build" pink button on the top and choose the "Download" option in the first row (Build). This will download one . js, include it in your project and javascript you will be able to check: if (Modernizr.touchevents) {&#xA; // suporta touch - dispositivo moveis&#xA;} else {&#xA; // não suporta - navegadores desktop&#xA;}

0

One solution is to leave the image with "position: Fixed" and make the z-index smaller than the other elements, works with videos as well.

Browser other questions tagged jquery html css

You are not signed in. Login or sign up in order to post.