1

Estou desenvolvendo um novo website aqui da empresa http://teste.softlove.us/

E tudo está funcionando (efeitos e tamanhos), estou utilizando Bootstrap e jQuery, exceto no mobile que na Home e About Us possui o efeito Parallax.

O mesmo não funciona em qualquer dispositivo mobile... alguém pode me ajudar ?

  /* 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>

O problema é que testando pelos navegadores na resolução do dispositivo mobile x ele aparenta funcionar. Mas ao testar no dispositivo nada acontece :(

O que pode ocasionar isso?

3
  • verifiquei que o efeito parallax está funcionando em seu site. Acessei por um iphone 5. Como você fez?
    – Itallo
    18/12/2016 às 13:47
  • utilizei sem js, fiz na unha o efeito em css 28/12/2016 às 2:09
  • Qual a solução que usou? Poderia mostrar?? Pfv haha 27/01/2017 às 8:04

2 Respostas 2

1

Os dispositivos mobile não detectam a rolagem da mesma forma que os navegadores.

Provavelmente quando você testa no celular, o efeito só acontece quando a animação da rolagem do navegador chega ao fim.

Uma dica é usar o modernizr para detectar se o navegador suporta eventos de touch. Se não suporta (navegadores desktop) você aplica o javascript do parallax, e se suporta (navegadores mobile) você não aplica e pode deixar a imagem sendo exibida de outra forma.

2
  • olá @dian , infelizmente não sei utilizar o modernizr ainda... mas entendi sua colocação... 17/10/2016 às 11:11
  • 1
    @RafaelRotiroti, para usar o modernizr nesse caso, é só ir no site modernizr.com/download e escolher na lista a opção "TouchEvents". Clica no botão rosa "Build" la em cima e escolhe a opção "Download" na primeira linha (Build). Assim vai ser baixado um .js, inclua ele em seu projeto e no javascript você vai conseguir verificar: if (Modernizr.touchevents) { // suporta touch - dispositivo moveis } else { // não suporta - navegadores desktop } 19/10/2016 às 18:17
0

Uma solução é deixar a imagem com "position: fixed" e deixar o z-index menor do que os demais elementos, funciona com vídeos também.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .