Parallax é a diferença na posição de objetos vistos em diferentes faixas de visão, medido pelo ângulo de inclinação entre as faixas. Com isso, objetos próximos têm uma maior Parallax que objetos mais distantes, quando observado de posições diferentes. Dessa forma, podemos dizer que o Parallax é o que nos dá a noção de profundidade em nosso campo de visão – UX Design
Parallax é algo que virou moda. É um efeito muito interessante quando bem utilizado e pode ser bastante explorado se você for criativo. Não é difícil de fazer este efeito utilizando CSS e Javascript. A coisa toda é muito simples. Vamos mostrar abaixo uma técnica que é bastante divulgada por aí. Tentei evitar firulas. O importante é que você entenda o cálculo, que é a essencia dessa técnica.
Passo 1: HTML
Inicialmente vamos criar dois elementos. Estes elementos terão backgrounds diferentes para e vamos atribuir uma classe bgParallax para identificar que eles terão o movimento do background alterado. Muitos artigos por aí colocam um data-type=”background” ou algo do gênero.
Também vamos inserir um atributo data-speed, que é o que vai definir a velocidade com que o background vai se mover em relação aos outros elementos. O HTML fica assim:
Passo 2: CSS
Eu coloquei algum CSS e defini um background para cada um dos divs. Defini uma altura, defini background, font, cor e etc. Veja abaixo o código CSS:
Nesse ponto eu apenas coloquei o CSS para formatar o visual dos DIVs. Como o background está fixed PARECE mas ainda não está com efeito parallax. Esse truque de colocar FIXED é velho, dá até um efeito bacana. Costumamos chamar de PARALLAX FAKE.
Agora vamos ao JQuery.
Passo 3: JQuery
Primeiro identificamos os elementos que o efeito será aplicado. Nesse caso são todos os elementos com a classe bgParallax.
Já que identificamos cada um dos elementos que terão o efeito, temos que identificar quando o usuário rola a página. Para isso iremos usar a função scroll() do JQuery. E aqui você precisa de muita atenção: a velocidade do scroll dos backgrounds é diferente da velocidade do scroll da página. É isso que causa o efeito de Parallax. É por isso que colocamos o atributo data-speed. Iremos utilizar aquele valor para definir quão rápido será a rolagem do background. Primeiro, precisamos definir a relação da rolagem: digamos que seja de 50px. Ou seja, a cada 50px o background vai rolar uma quantidade determinada de pixels. Esse valor é o 50px dividido pelo data-speed do objeto. Suponha que o data-speed seja de 10px. Logo, a cada 50px de rolagem da página o background rola 5px apenas. Sacou? Olha só o código:
Colocamos esse valor dentro de uma variável yPos. O valor é negativo por que o background tem que se mover para cima.
O $(window).scrollTop() pega o valor de quanto a página já rolou do topo, esse valor é dividido pelo $obj.data(‘speed’), que é o valor que colocamos no atributo data-speed de cada div.bgParallax.
Agora precisamos definir que esse valor seja o valor do TOP no background-position dos divs. Fazemos isso assim:
Aplicamos isso ao objeto assim:
O código final fica assim:
Veja o exemplo completo aqui.