Parallax effect is not working on mobile

Question

Parallax effect is not working on mobile

Navigation

#1 by (1 votes)

1

I'm developing a new website here link

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

The same does not work on any mobile device ... can anyone 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 testing for browsers on the mobile device x resolution seems to work. But testing on the device nothing happens :(

What can cause this?

html jquery css

asked by anonymous 10.10.2016 / 12:37

1 answer

How to sort query using PDO? Retrieve JSON values and assemble HTML for each record

score 1 · Accepted Answer

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

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

One tip is to use modernizr to detect whether your browser supports touch events. If you do not support (desktop browsers) you apply the javascript of parallax, and if it supports (mobile browsers) you do not apply and can leave the image appearing otherwise.