Parallax simples com CSS
TutoriaisHá 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.
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á.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<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/250×250” alt=“”></li>
<li><img src=“http://placehold.it/250×250” alt=“”></li>
<li><img src=“http://placehold.it/250×250” alt=“”></li>
<li><img src=“http://placehold.it/250×250” alt=“”></li>
<li><img src=“http://placehold.it/250×250” alt=“”></li>
<li><img src=“http://placehold.it/250×250” 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
* {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.
1
2
3
|
$(‘.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:
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.
ESTÁ GOSTANDO DESTE ARTIGO?
Então não deixe de compartilhar com seus amigos. Ajude a Tutorial Web Design a crescer ainda mais.
Para isso, vamos utilizar o método offset() do jquery.
1
|
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.
1
2
|
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.
1
|
var bgpos = ‘50% ‘+ yPos + ‘px’;
|
Aplicamos isso ao objeto:
1
|
$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:
1
2
3
4
5
6
7
8
9
10
11
12
|
$(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);
});
});
});
|