Efeito Parallax

Front-end

24/08/2014

O Efeito Parallax alguem conhece, poderiam me confirmar se esse site utiliza esse efeito.


[url]http://www.tridentpp.com/contact/[/url]
Marcelo Pastore

Marcelo Pastore

Curtidas 0

Respostas

Joel Rodrigues

Joel Rodrigues

24/08/2014

Exatamente. É um efeito legal para alguns tipos de site.
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

24/08/2014

Conhece algum tutorial bom sobre esse assunto?
GOSTEI 0
Claudio Aguiar

Claudio Aguiar

24/08/2014

Show mesmo esse visual no site, bem bacana!
GOSTEI 0
Franzé Peixoto

Franzé Peixoto

24/08/2014

Gostei tambem e depois de procurar achei! segundo o primeiro link com apenas jquery e css da pra fazer.

[url]http://tableless.com.br/parallax-simples-com-jquery-e-css/[/url]

[url]http://blog.erikfigueiredo.com.br/como-criar-um-tema-parallax-navegacao-ajax-responsivo-e-historico-do-navegador-usando-twitter-bootstrap-e-jquery-parte-3-o-javascript/[/url]
GOSTEI 0
Raphael Souza

Raphael Souza

24/08/2014

Utiliza parallax sim. Ao meu ver de forma exagerada..rs
Acho um efeito legal pra ser implementado em situações específicas, mas colocar a fluidez do site inteiro em parallax ficou horrível.
O site ficou muito bacana, não tiro o mérito de forma alguma. Mas ao meu ver a usabilidade está praticamente nula! Tudo flui naturalmente se o usuário entrar e ficar dando scroll de forma desenfreada para visualizar as seções do site.

Um site elegante chama muito atenção e agrega muito valor. Contudo, é preciso levar em conta que o cliente quer entrar no site e ter acesso a informação. O fato de ter que ficar rolando o scroll pros elementos se encaixarem em sua devida posição e formar a informação ficou péssimo. Ex.: Entre em portfolio e role o scroll uma única vez. Perceba que a informação ficou comprometida com o título por cima e desordem de conteúdo. O cara fez do site quase um jogo de scroll.

Site lindo, mas com usabilidade zero.
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

24/08/2014

Eu achei legal nesse site, porem nem todos cabem a fazer da mesma forma. com isso esse efeito pode ser utilizado em quais situações que não seja no site inteiro?
GOSTEI 0
Raphael Souza

Raphael Souza

24/08/2014

Eu achei legal nesse site, porem nem todos cabem a fazer da mesma forma. com isso esse efeito pode ser utilizado em quais situações que não seja no site inteiro?


Estes pra mim são ótimos exemplos de uso do parallax

1) http://community.saucony.com/kinvara3/: repare que em uma única rolagem do scroll o efeito parallax inicia e termina, dispondo de forma elegante e eficiente a informação na tela.

2) http://janploch.de/: o efeito da garrafa esvaziando ficou muito bacana, mas repare que o conteúdo é "imutável" durante o processo de transição com o parallax, mantendo a elegibilidade do mesmo e eficiência da informação.
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

24/08/2014

Notei que isso envolve conhecimento com manipulação de imagens, estou enganado? este efeito é legal mas se for para utilizar programas graficos dificulta um pouco não acha?
GOSTEI 0
Raphael Souza

Raphael Souza

24/08/2014

Eu achei legal nesse site, porem nem todos cabem a fazer da mesma forma. com isso esse efeito pode ser utilizado em quais situações que não seja no site inteiro?


O fato não é usar ou não no site inteiro, mas sim saber usar. No site de exemplo do posto é necessário utilizar constantemente o scroll para que a informação tome corpo e fique apresentável, tornando o site pouco eficiente e chato de se navegar. Isso é uma opinião de usabilidade minha, apenas.

Nos sites que coloquei como exemplo, o efeito é perceptível no site inteiro, assim como nas transições entre uma section e outra do site. Porém, são efeitos que influenciam na disposição da informação com evento único de scroll no primeiro exemplo, mantendo o efeito no movimento do cursor do mouse de forma discreta e elegante, e no segundo exemplo é uma "animação" da garrafa esvaziando sem ligação direta com o conteúdo do site. Ou seja, a informação está ali logo de cara, sem maiores frescuras. Não é algo exagerado que ostente o conhecimento de parallax, dificultando a navegação dos usuários..rs

Outra coisa que torna o site de exemplo do post confuso: repare que ele começa pelo final, alterando de forma drástica o paradigma de navegação, uma vez que ele inverte o scroll da rolagem vertical. Explicando melhor: carregue o site e faça o evento de scroll que normalmente faria para navegar em um site qualquer que tenha rolagem vertical. Repare que NADA acontece, pois ele já está no fim da página. Para se iniciar a navegação no site é necessário fazer um scroll em direção ao topo da página. E não há qualquer informação explicando isso.

Talvez para mim e para você que tem certo conhecimento no assunto não seja algo tão absurdo e confuso (pra mim foi confuso), mas pro usuário leigo é completamente chato e muito difícil atingir informações específicas deste site, como por exemplo o portfolio. Ao meu ver o portfolio é a informação chave desta empresa, mas pq diabos se estabeleceu que o ponto de partida do site seria a localização no mapa? Ou porque diabos o site começa pelo final, quebrando o paradigma de navegação habitual?

Pra mim vai muito além de desenvolver um site bonito inteiro ou parcial em Parallax. São as estratégias de desenvolvimento que mostrarão o caminho ao qual seguir no projeto de desenvolvimento do site.
GOSTEI 0
Raphael Souza

Raphael Souza

24/08/2014

Notei que isso envolve conhecimento com manipulação de imagens, estou enganado? este efeito é legal mas se for para utilizar programas graficos dificulta um pouco não acha?


Em partes está certo. Ele consiste em recalcular a posição da imagem de acordo com um tipo de evento. Tem um exemplo legal e muito didático sobre isso no site do Tableless.
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

24/08/2014

Valeu Raphael pelos esclarecimentos.
GOSTEI 0
POSTAR