Campo de busca

Categoria Front-End

O tal do Parallax

O tal do Parallax

Por | 07 de fevereiro, 2014 | 1 comentários

Atualmente tivemos um grande crescimento no número de sites single page, com isso as pessoas viram a oportunidade de aplicar esse efeito para criar uma interação com o usuário.

Mas o que é o Parallax?

Parallax é o nome que se dá ao efeito de objetos se movimentando de forma independente na tela, como se existissem várias camadas. Como fazemos isso? Existem vários plugins que permitem a criação desse efeito. O que vou apresentar hoje para vocês é o Superscrollorama.

No site do plugin você pode fazer o download dele e existem exemplos e uma pequena documentação onde você pode entender como é o funcionamento da ferramenta.

Scrollorama na prática

Como ele é um plugin baseado em jQuery e na API TweenMax.js, os arquivos mínimos para o funcionamento são:

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.superscrollorama.js"></script>
<script src="js/greensock/TweenMax.min.js"></script>

Esses arquivos vem quando você faz o download do plugin e estão nessa ordem de pastas, o jQuery já é a versão minificada, mas os dois arquivos do plugin não, eu recomendo que deixe todos eles minificados, porque nunca serão alterados.

Todo elemento que for receber um script de movimento, deverá ser referenciado com "$.superscrollorama" e que por padrão define-se uma variável para facilitar a referencia que nesse caso é a "controller", mas você pode chamá-la como quiser.

$(document).ready(function($) {
  var controller = $.superscrollorama(); 
});

O Superscollorama é uma ferramenta muito grande e que te oferece inúmeras opções de animações. Para iniciarmos a animação é necessário definir o que irá se movimentar.

<section class="container">

  <div class="exemplo"></div>

</section>

Devemos chamar o método ".addTween" e depois passar o nome do nosso objeto, utilizando classe ou id. Nesse exemplo vou utilizar mais um método, que é o ".fromTo", ou seja, os primeiros valores em css que eu passar serão o ponto de partida do objeto e os valores que vem depois serão como ele ficará após a animação. O valor que vem após a chamada do objeto, que no caso é "2" é o tempo de duração, ou seja, serão 2 segundos. Quando carregar a página, o quadrado estará escondido, e ao descer ele vai aparecer.

controller.addTween('.exemplo',
  TweenMax.fromTo($('.exemplo'), 2, 
  {css:{left: '-50px'}}, 
  {css:{left: '500px'}}) 
);

Opa, antes de irmos para o exemplo... Você não faria a atrocidade de estar com um ie8 browser desatualizado, não é mesmo? Agora sim, o link:

Exemplo

Agora vamos brincar com mais valores? De início temos um quadrado de 50x50 que depois se transformará em um quadrado de 200x200 com uma distância de 500px à esquerda, enquanto tiver acontecendo essa animação rotacionará 90deg e ficará com as bordas arredondadas. 

controller.addTween('.exemplo', 
  TweenMax.fromTo($('.exemplo'), 2, 
  {css:{width: 50, height: 50}}, 
  {css:{width: 200, height: 200, left: '500px', transform: 'rotate(90deg)', borderRadius: '50%'}})
);

Exemplo

Pin

Uma feature muito bacana dessa ferramenta é o Pin, que rola a página até o obejto ficar no topo, e então os eventos acontecem até que acabe o tempo de rolamento. Lembra que utilizamos o ".fromTo" no último exemplo? Então, dessa vez utilizaremos apenas o ".to" porque utilizaremos o ".append" também, o qual funciona como se fosse os passos da animação enquanto está em Pin, e que quando se completa vai para o próximo passo.

O que eu havia dito sobre "tempo de rolamento" é o que eu referencio como "7000" ou seja, a animação de Pin vai acontecer enquanto o usuário rolar a página por esses 7000px.

controller.pin($('.exemplo'), 7000,
  { anim: (new TimelineLite())
  .append( 
    TweenMax.to($('.exemplo'), .7,
    {css:{left: 0, borderRadius: 50}}) 
  )
  .append( 
    TweenMax.to($('.exemplo'), .5, 
    {css:{top: 300, width: '100%'}})
  )
  .append( 
    TweenMax.to($('.exemplo'), .5,
    {css:{top: 0, width: '50px', borderRadius: 0}})
  ) 
});

Exemplo

Como eu disse, esse plugin é muito grande, e te permite muitas variações de animações, é só usar a imaginação e adequar ao seu projeto.

Bom, por hoje é só. Espero que esses exemplos e explicações sejam úteis para você! Existem outros plugins para a criação desse efeito, você usa e recomenda algum outro?

Dúvidas, críticas e sugestões, postem aqui nos comentários, vou ficar feliz em respondê-los! :D

 

Deixe um comentário

Queremos saber o que você pensa sobre esse post! Ficaremos felizes se você nos deixar um comentário :-)

Tenha em mente que os comentários são moderados, e os links possuem rel="nofollow". Então por favor, não faça spam de palavras-chave, senão o seu comentário será excluído. Obrigado!

 

[1] Comentários  

Julio

Show! o/

07-02-2014 às 15:13 Responder