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;
}