0

Estou tentando fazer um parallax em duas camadas e não estou conseguindo.

O que quero fazer é parecido ao site https://willianjusten.com.br/exemplos-de-sites-com-parallax/. Quero que a imagem de fundo e o título se deslocam para baixo ao mesmo tempo e em velocidade diferentes para dar a impressão de que a imagem está mais ao fundo e o título um pouco mais a frente ao rolar o mouse para baixo, e o efeito inverso ao rolar o mouse para cima.

O meu problema é que não faço a mínima idéia de como fazer em CSS3.

Já tentei vários exemplos como o do site: https://keithclark.co.uk/articles/pure-css-parallax-websites/ mas sem o efeito desejado.

A estrutura do HTML para receber o parallax está assim:

HTML:

<div class="row parallax">
  <div class="col">
    <h1 class="text-center">text here</h1>
  </div>
</div>

<!-- restante do post -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

E o CSS:

.parallax{
   background:url('https://cdn.pixabay.com/photo/2017/12/23/22/12/orange-3036097_960_720.jpg');
   height:300px;
}
3
  • Brunão, mas lá no link que vc citou ele já ensina tudo... Aqui nessa resposta mesmo eu usei um modelo desses de Parallax com CSS onde o cara queria um menu fíxo no topo... Mas o código do parallax está lá é só testar ou pegar se te interessar pt.stackoverflow.com/questions/235915/menu-fixo-no-parallax/…
    – hugocsl
    20/09/2018 às 12:38
  • Então acho que meu navegador está com problemas (Mozilla Linux) porque olha como está o seu exemplo do outro post: ibb.co/kHWxHK. O mesmo acontece com as tentativas de fazer o parallax. Sempre algo "buga" 20/09/2018 às 12:58
  • Cara vc tem que verificar se essas propriedades precisam de prefixo. Pega todo aquele código CSS da outra resposta e cola aqui do lado da esquerda onde está escrito .exemple: autoprefixer.github.io ai o ferramente vai colocar os prefixos de todos os browses. Mas mesmo assim pode não funcionar, ai vc pode verificar aqui qual propriedade seu browser não aceita caniuse.com/#feat=transforms3d só digitar no topo a propriedade que quer pesquisar
    – hugocsl
    20/09/2018 às 13:16

0

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

Pesquise outras perguntas com a tag .