Publicado em web

O uso do efeito Parallax na web

by Natália Scapin on07 Março 2015 1563 vezes

A mágica do efeito consiste em movimentar cada item em diferentes velocidades, sendo que os que estão em primeiro plano tem uma velocidade e tamanho superior aos que se encontram mais distantes no campo de visão.


Quando aplicamos o efeito parallax em uma arte 2D, ocorre a "simulação" do efeito de uma Travelling feito pela câmera. Reparem no movimento do travelling no vídeo ao lado.

Esses efeitos causam uma imersão do expectador diante da imagem, enriquecendo a experiência e em muitos casos utilizado para suprir a falta de material para o trabalho.


O uso do parallax em games

Para chegar ao nosso objetivo de explicar o uso do parallax na web, seria impossível não comentar a respeito do jogo "Moon Patrol" dos anos 80. Ao criar jogos para Atari a produtora Japonesa Irem, sabendo que desenvolver um universo 3D naquele momento era inviável, utilizaram o efeito parallax em seus jogos criando um universo em movimento e revolucionando o mercado de games.

Assista ao vídeo do Moon Patrol e perceba a aplicação do efeito, o movimento dos cenário e principalmente a variação de velocidade dos componentes do game, que segue o padrão de Arcade.

Hoje em dia a técnica é usada a exaustão em inúmeros jogos para web e celular. Utilizando a programação JavaScript ou ainda em Html5 e CSS3.

 


O efeito Parallax em sites

Saindo do universo dos games com parallax dos anos 80, estamos agora no ano de 2011 e iremos falar sobre o uso do parallax na web. O primeiro grande site a utilizar essa técnica foi o "Nike Better World", aplicando suas funções a partir da rolagem do mouse vertical (scrooling) .

Após o uso do efeito pela Nike aliada sua capacidade em criar tendências, o uso do efeito explodiu, foram criados Frameworks para auxiliar a implementação e desenvolvimento, inclusive um deles batizados justamente como "Nike Better World".

Sem contar o efeito de imersão causado pelo uso do parallax, existem ainda artigos afirmando que sua implementação em um site aumenta o engajamento com o público em torno de 70%, segundo o site Webdesignledger 

Natália Scapin

Designer, Web Master e breve Publicitária

Natália Scapin, natural de São Caetano do Sul, SP, é Designer Gráfica, Web Master e muito breve publicitária. Nerds desde que se conhece por gente. Amante de games, internet, artes, animação, criação e inovação. Já trabalhou em agência, studio de animação e até desenvolvendo ilustrações técnicas para indústria.
Atualmente está no último ano de Publicidade e Propaganda pela USCS (Universidade de São Caetano do Sul), é uma das criadoras do Desenheiros. Cria com a mesma facilidade que respira.

Natália Scapin

Designer, Web Master e breve Publicitária

Natália Scapin, natural de São Caetano do Sul, SP, é Designer Gráfica, Web Master e muito breve publicitária. Nerds desde que se conhece por gente. Amante de games, internet, artes, animação, criação e inovação. Já trabalhou em agência, studio de animação e até desenvolvendo ilustrações técnicas para indústria.
Atualmente está no último ano de Publicidade e Propaganda pela USCS (Universidade de São Caetano do Sul), é uma das criadoras do Desenheiros. Cria com a mesma facilidade que respira.

 


FrameWorks de parallax:
http://stephband.info/jparallax/index.html
http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/
http://joelb.me/scrollpath/

Fontes:
http://www.uxdesign.blog.br/front-end/a-imersao-do-efeito-parallax/
http://rfranco.org/2013/04/o-que-e-parallax-design-exemplos/
http://www.waltdisney.org/content/multiplane-camera
http://www.videoguru.com.br/o-efeito-paralaxe.html
BLOG COMMENTS POWERED BY DISQUS
Última modificação em 02 Maio 2015
Avalie este item
(0 votos)