O efeito de Parallax tem se tornado uma moda hoje em dia, sendo um efeito muito interessante se não abusado. O Parallax de forma simples consiste em mover o plano de fundo, ou as diversas camadas que o compõe em velocidades diferentes, com isso enganando o cérebro e criando uma ilusão de profundidade.

Vamos a um exemplo de um site de página única.

Para começar o HTML: 

<div>
    <div class="content">
        <h1>Nam maximus sem quis massa ultrices lacinia </h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sodales vitae lorem non pretium. Curabitur mattis massa et ante cursus, in pharetra libero pulvinar. In hac habitasse platea dictumst. </p>
    </div>
</div>
<div class="parallax p1">
    <div class="content">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sodales vitae lorem non pretium. Curabitur mattis massa et ante cursus, in pharetra libero pulvinar. In hac habitasse platea dictumst.</p>
    </div>
</div>
<div>
    <div class="content">
        <h1>Nam maximus sem quis massa ultrices lacinia </h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sodales vitae lorem non pretium. Curabitur mattis massa et ante cursus, in pharetra libero pulvinar. In hac habitasse platea dictumst.  </p>
    </div>
</div>
<div class="parallax p2">
    <div class="content">
        <h1>Proin blandit luctus neque et feugiat</h1>
        <p>Fusce sem leo, tempor interdum sagittis et, blandit et orci. Proin blandit luctus neque et feugiat. Proin eu nulla aliquam, ornare justo ac, iaculis libero. Nunc euismod velit vel sem accumsan elementum ut at magna.</p>p>
    </div>
</div>
 
<div>
    <div class="content">
        <h1>Nam maximus sem quis massa ultrices lacinia </h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sodales vitae lorem non pretium. Curabitur mattis massa et ante cursus, in pharetra libero pulvinar. In hac habitasse platea dictumst. </p>
    </div>
</div>

No conteúdo apresentado, os divs com a classe parallax são os elementos que queremos aplicar o efeito parallax, ou seja queremos que a imagem de fundo tenha movimento e para isso precisamos adicionar a imagem e trabalhar com o posicionamento do fundo.

...
     
.parallax{
    border-bottom: 20px solid #990000;
    border-top: 20px solid #990000;
    height: 400px;
    background-position: 50% 0%;
}
 
...
 
.p1{ background:url(https://www.hidemyass-freeproxy.com/proxy/pt-br/aHR0cHM6Ly93d3cuYm90ZWNvZGlnaXRhbC5pbmZvL3dlYi9lZmVpdG8tcGFyYWxsYXgtZW0tcGFnaW5hcy1jb20tanF1ZXJ5L2ltZy9iZzEuanBn) center 0%; }
.p2{ background:url(https://www.hidemyass-freeproxy.com/proxy/pt-br/aHR0cHM6Ly93d3cuYm90ZWNvZGlnaXRhbC5pbmZvL3dlYi9lZmVpdG8tcGFyYWxsYXgtZW0tcGFnaW5hcy1jb20tanF1ZXJ5L2ltZy9iZzIuanBn) center 0%; }
 
...

Como visto no trecho de CSS acima, apenas precisamos estipular um altura legal para o elemento com parallax, posicionar o background-position centralizado no eixo X e colocar uma imagem de fundo diferente para cada elemento que terá o efeito parallax.

Agora a “magia” está no javascript, para facilitar utilizaremos jQuery então não esqueça de incluir a biblioteca na sua página.

$(document).ready(function(){
    $('.parallax').each(function(){
        var $obj = $(this);
        $(window).scroll(function() {
            var yPos =  - ( $(window).scrollTop()  / 3 ); 
            var bgpos = '50% '+ yPos + 'px';
            $obj.css('background-position', bgpos );
    });
    }); 
});

No código acima, começamos pela linha 2, onde selecionamos todos os elementos com a classe paralax e com o método each executamos uma função para cada elemento selecionado. Na linha 3, para facilitar( e evitar conflitos ) colocamos o objeto selecionado em uma variável, neste caso chamada obj.

Na linha 4 é onde a magia começa, nela selecionamos o objeto window e utilizamos o evento scroll que “escuta” a rolagem da página e executa um bloco de código para cada alteração na posição da página.

No bloco de código a ser executado pelo evento de scroll, na linha 5, começamos pegando a posição do topo da rolagem da página($(window).scrollTop() ) e dividimos, neste caso, por três e trocamos o sinal com o operador “-” para este ficar negativo, este valor será o deslocamento no eixo Y da imagem de fundo do elemento parallax o qual iremos armazenar em uma variável. Com isso para cada 3 pixels de deslocamento da rolagem da página será deslocado o fundo do elemento .parallax em 1 pixel. Para alterar a relação de deslocamento basta em vez de utilizar 3 para dividir usar outro número.

Na linha 6 apenas formatamos o valor para a propriedade background-position e na linha 7 aplicamos o valor na propriedade do elemento.

Veja um exemplo de parallax.

Espero que tenha ajudado, este é só um exemplo demostrando a técnica, para seu projeto deve ser adaptado.