Efeito de Paralax de fundo fixo. 
Autor: LUIZ G.
Visitado 1191,
Seguidores 1,
Compartilhado 0
Olá,
Alguém sabe dizer porque o efeito de paralax fixo não funciona em celulares? Vejo vários sites usando o recurso aparecendo normalmente em mobiles.
Mas o do Website X5 não funciona. A imagem acompanha a página e não fica parada com o efeito de janela.
Obrigado.
Publicado em
EN >> ● The parallax effect has been improved and disabled for the touch devices and for the last two breakpoints.
IT >> ● Migliorato l'effetto parallasse e disabilitato per i dispositivi touch e per gli ultimi due breakpoint
>>> https://www.websitex5.com/changelog/v2019.1/it.php?ed=
.
... como alternativa, você pode usar o código EXTRA para corrigir o plano de fundo ...
.
Autor
Olá, KolAsim... Não entendo o motivo de tal desabilitação. Vejo esse efeito em diversos sites funcionando muito bem em dispositivos mobiles.
Qual seria esse código EXTRA que você mencionou? Poderia me dizer?
Obrigado.
abs
------------------------------------------------------------------------------------
Hi, KolAsim ... I do not understand the reason for such disabling. I see this effect on several websites working very well on mobile devices.
What would that EXTRA code be that you mentioned? Could you tell me?
Thanks.
hugs
Hola Luiz,
El efecto fue desactivado para celulares, ya que muchos usuarios reportaron que el movimiento no era muy fluido, por lo que mientras analizan la solucion, se desactivó el efecto en la vista movil.
Saludos colega...
Carlos A.
Autor
Obrigado, Carlos...
O amigo KolAsim tb comentou isso. Porém, tb comentou sobre um Código EXTRA (acima). Por isso, se tiver alguma forma, mesmo com auxílio de um código adicional em HTML, eu gostaria de tentar, uma vez que é um desejo muito grande da clinte.
Abraço!
(It > Pt) ... para verificar, eu tenho que ver o LINK da página ...
... então eu colocarei o código mais adequado para você ...
ciao
.
Autor
Ok, KolAsim... Vou passar o link de uma página que uso para testes do site que estou desenvolvendo. è uma página oculta, para ver se determinados recursos funcionam como esperado.
O link temporário é:
https://lugan.com.br/andrea/laboratorio.html
Desde já, agradeço dua ajuda.
abraço.
... cole o código nas propriedades da página, nesta seção:
>> Passo 3 - Mapa > A janela Propriedades da Página > Opções na aba Avançadas | ▪Código personalizado: (3°) > Antes de fechar a tag HEAD :
<style>
#imPageRowGraphics_2 { background: transparent url('')}
#imPageRow_1 { background-color:rgba(255, 255, 255, 0.8) !important;}
html{ background: url(https://lugan.com.br/andrea/images/large-62931.jpg) ;
background-position: center center; background-repeat: no-repeat;height:100%;
-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed;}
</style>
.
ciao
.
Autor
Olá, KolAsim... Não sei se fiz certo, mas segui exatamente o que vc colocou, mas o resultado foi o fundo inteiro da página com a imagem em parallax. Porém a ideia era apenas uma janela de 350 pxls com a imagem fixa ao fundo. Não sei se consegui me explicar bem na postagem inicial.
Seria o mesmo efeito do recurso, fundo fixo, mas funcionando nos mobiles.
Veja como ficou com o código acima...
https://lugan.com.br/andrea/laboratorio.html
Obrigado!
(It > Pt) ... eu vi; ... OK ... ... funciona no meu smartphone ...
... infelizmente atualmente não tenho o programa e nem o PC ...
... meu código é usado apenas para obter o plano de fundo fixo ...
... para as outras configurações, é necessário verificar a disposição e o tipo de objetos a serem inseridos na grade ...
ciao
.
Autor
Obrigado, de qualquer forma, KolAsim...
Talvez alguém tenha essa solução aqui na comunidade. Tem que existir, porque já vi funcionado em diversos sites. Normalmente, são anúncios da rede de displays do Google ADS ou Mercado Livre.
Ao passar o dedo no touch, o texto sobe e a imagem fica fixa. Uma experiência bem legal.
Abraço!
Autor
Já consegui rexolver. É preciso incluir um código EXTRA que funcionou perfeitamente.
Quem quiser saber, me avise.
Abraço.
(It > Pt) ... usando meu código, você apenas teve que corrigir o plano de fundo dos objetos na página ...
... o código que você usou agora é o mesmo que o anterior e semelhante a algumas das minhas variantes para usar conforme apropriado ...
... mas você estava errado ao aplicá-lo, tendo criado erros no código HTML na fonte da página ...
... isto é o que você vê no navegador:
.
Autor
Na verdade, o código que deu certo foi esse abaixo:
<style>
.parallax {
/* The image used */
background-image: url("https://lugan.com.br/andrea/images/foto-decks_lkxosbyj.jpg");
/* Set a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<p> ...</p>
<div class="parallax"></div>
<div style="height:100px;background-color:white;font-size:36px">
teste
</div>
... tudo permaneceu como eu disse no meu post anterior ...
.