Saiba como criar o efeito parallax sem plugin

O QUE É PARALLAX
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.

Há bastante tempo, o efeito parallax vem se tornando um diferencial no visual dos milhares e milhares de sites em desenvolvimento. Esta técnica permite dar profundidade a elementos do layout, evoluindo cada vez mais o padrão de sites e colocando no topo os profissionais mais detalhistas e preocupados com o visual.

Para quem ainda não teve a oportunidade de conhecer, apresento abaixo alguns sites que fazem uso dessa técnica:

Exemplos

http://www.manufacturedessai.it/en/
http://nizoapp.com/
http://tympanus.net/Tutorials/ParallaxSlider/
http://jonathannicol.com/projects/parallax-scrolling/

PASSO 1: CRIANDO O HTML
O HTML é muito simples, basta que tenhamos algumas sessões de conteúdo e cada sessão com um background diferente. Vamos adicinar a classe “parallax” a essas sessões para que possamos diferenciar dos demais elementos.

Além da classe nós vamos adicionar o atributo “data-speed” que irá definir a velocidade que o efeito acontecerá.

Código:


<section id="home" class="parallax" data-speed="15">
    <article>
        <header>
            <h1>Seja Bem Vindo!</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse aperiam, tempore laudantium a nesciunt quo possimus, quidem quae cum, doloremque facilis, aliquid eveniet porro amet labore autem expedita adipisci vitae?</p>
        </header>
    </article>
</section>
<section id="portfolio" class="parallax" data-speed="10">
    <article>
        <header>
            <h1>Alguns de nossos Trabalhos</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, deleniti. Maxime, reprehenderit, incidunt? Qui, placeat, nostrum error itaque animi sit vel qu.</p>
        </header>
        <ul>
            <li><img src="http://placehold.it/250x250" alt=""></li>
            <li><img src="http://placehold.it/250x250" alt=""></li>
            <li><img src="http://placehold.it/250x250" alt=""></li>
            <li><img src="http://placehold.it/250x250" alt=""></li>
            <li><img src="http://placehold.it/250x250" alt=""></li>
            <li><img src="http://placehold.it/250x250" alt=""></li>
        </ul>
    </article>
</section>

PASSO 2: AJUSTANDO O CSS
Agora que temos nosso HTML criado, vamos estilizar e adicionar as imagens para começar a criar o efeito.

Código:


* {margin:0; padding: 0;}
html, body {height:100%;}
 
section { display: inline-block; } /*Para ajustar padrão do chrome*/
 
/** formata elementos que tem backgrounds parallax **/
.parallax {
    font-family: 'tahoma', sans-serif;
    color:#FFF;
    margin: 0 auto;
    width: 100%;
    /*max-width: 1920px;*/
    position: relative;
    min-height: 100%;
    text-shadow:0 0 10px rgba(0,0,0,0.7);
    
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
 
/* Define backgrounds dos divs */
#home {background-image: url(img1.jpg);}
#portfolio {background-image: url(img2.jpg);}
 
/** Formata o article que vai o texto **/
.parallax article {
    width: 70%;
    text-align: center;
    margin:0 auto;
}
#home article { padding:20% 0 0; }
#portfolio article { padding:15% 0 0;}
 
/** formata texto **/
article header { margin-bottom: 30px; }
article h1 {font-size:40px;}
article p {line-height: 30px; font-size:20px; margin-top:15px; text-shadow: 0 0 20px #000; }
article ul { list-style:none; padding: 0; margin: 0; }
article li { display: inline-block; }

O que fizemos aqui foi apenas adicionar as imagens que irão ser utilizadas no parallax, ajustamos as cores do texto, tamanho de fonte, margens, padding e outras coisas a mais que não tem importância para a técnica de parallax. A configuração mais importantes aqui são: “width: 100%”, “min-height: 100%” e o “background-attachment: fixed”. Essas configurações permitem que tenhamos um efeito parecido com o parallax, também bastante utilizado, mas ainda não é parallax!

PASSO 3: JQUERY
Vou explicar primeiramente passo a passo como funciona o código e ao final irei apresentar o código completo, ok?

IDENTIFICANDO O SELETOR
Primeiramente, vamos identificar cada seletor que irá receber as propriedades do parallax.

Código:


$('.parallax').each(function(){
    var $obj = $(this);
});  

A função each() do jquery localiza todos os elementos que possuam o seletor especificado e aplica as funcionalidades adicionadas na função.

a variável $obj está armazenando o $(this) que por sua vez recebe a classe parallax que é o seletor da função.

O DATA-SPEED
Agora precisamos identificar e adicionar o efeito do parallax no momento em que o usuário rolar a página, e para isso vamos utilizar a função “scroll()” do jquery.

Um ponto bastante importante é identificar que a técnica do parallax acontece pela diferença de velocidade entre o rolar da página e o movimento do background da página. A velocidade entre eles é diferente, por isso colocamos o atributo “data-speed” para identificar a velocidade que gostaríamos que o background se comporte com relação ao rolar da página, portanto para isso vamos dividir a quantidade de pixels que rolamos a página pelo valor do atributo data-speed, exemplo:
Com o valor 10 no data-speed, a cada 50px de rolagem da página o background vai rolar apenas 5px. Entenderam?

Exemplo:

Código:

1
$(window).scrollTop() / $obj.data('speed')

POSIÇÃO DO ELEMENTO
Agora que sabemos como funciona o parallax, precisamos identificar a posição do elemento (que recebe a classe parallax) com relação a página. Isso ajuda a evitar problemas no efeito quando o aplicamos em locais que possuam uma altura(height) determinada e que estejam localizadas no meio da página, por exemplo.
Para isso, vamos utilizar o método offset() do jquery.

Código:

var offset = $obj.offset();

CALCULO FINAL
Agora que conseguimos pegar a posição dos elementos que possuem o efeito, vamos adicionar essa variável offset ao calculo do parallax.

Código:

var offset = $obj.offset();
var yPos = -($(window).scrollTop() - offset.top) / $obj.data('speed');

Armazenamos o resultado dessa conta em uma variável yPos, pois iremos utilizá-lo futuramente. O valor será negativo, pois o background deverá se mover para cima, ok?

ATRIBUINDO VALORES
Agora vamos atribuir um valor ao TOP do atributo “background-position” do CSS utilizando o método css() do jquery. Esse atributo será adicionado a todo elemento que possuir a classe .parallax.

Código:

var bgpos = '50% '+ yPos + 'px';

Aplicamos isso ao objeto:

Código:

$obj.css('background-position', bgpos );

Lembrando que o $obj é uma variável que armazena o valor $(this) que por sua vez faz relação a todo elemento que possua a classe “.parallax”.

Finalizamos assim nosso código jquery. O código final fica:

Código:


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

VEJA O RESULTADO: AQUI!

Créditos: Hashy (testar e divulgar)
Carlos Costa (Criar códigos)