Parallax with two layers when scrolling mouse

Question

I’m trying to do a two-layer Parallax and I’m not getting it.

What I want to do is similar to the site https://willianjusten.com.br/exemplos-de-sites-com-parallax/. I want the background image and title to scroll down at the same time and at different speeds to give the impression that the image is more in the background and the title a little further forward when scrolling the mouse down, and the reverse effect when scrolling the mouse up.

My problem is that I have no idea how to do in CSS3.

I have tried several examples like the site: https://keithclark.co.uk/articles/pure-css-parallax-websites/ but without the desired effect.

The HTML structure to receive Parallax looks like this:

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>

And the CSS:

.parallax{
   background:url('https://cdn.pixabay.com/photo/2017/12/23/22/12/orange-3036097_960_720.jpg');
   height:300px;
}