Rolagem paralaxe com CSS

Existem algumas maneiras de fazer um efeito de rolagem de paralaxe. A maioria dos exemplos que você encontra ao pesquisar no StackOverflow etc contém exemplos de movimentação de camadas individuais ou divs com jQuery acionado pelo evento onscroll no documento. Este blog descreve uma maneira mais eficiente de resolver esse problema, o que significa melhor desempenho, código mais fácil de manter e um significado mais semântico da própria marcação.

Demo

Demonstração de trabalho no webkit – a tecnologia é suportada em todos os principais navegadores com capacidade HTML5 (IE10 +, Safari, Chrome e Firefox). A demonstração agora está otimizada para Webkit, mas pretendo fazer com que funcione em todos os outros navegadores também:

Demo

Mas, primeiro, algumas palavras sobre o Parallax Scroll

Parallax Scroll é uma técnica antiga para simular a profundidade da visão em jogos de computador e é popular desde 1982, quando o primeiro jogo Moon Patrol o introduziu nos jogos. A ideia básica é que os objetos que estão mais distantes se movem mais devagar em relação aos objetos da frente e, ao imitar esse efeito, temos uma sensação de 3D em nossa tela 2D.

HTML5 e flash

Parallax scroll tem sido usado na web por alguns anos e o antigo site da Iteams lançado em 2010 foi baseado exclusivamente neste efeito. Alguns anos atrás, não podíamos simular muito bem esse efeito com HTML padrão e precisávamos de muitos truques, como definir a posição do fundo e voltar para o flash, etc.

Bem-vindo CSS3 e TranslateZ

Agora temos ferramentas poderosas incorporadas ao CSS3 que nos permite falar diretamente com a GPU e, em vez de usar Javascript para controlar o posicionamento de nossos elementos individualmente, podemos movê-los todos juntos, o que significa melhor desempenho e abrir novas possibilidades.

O problema do celular

Infelizmente, ainda não há boas maneiras de reproduzir o efeito em um dispositivo móvel e a razão para isso é que os eventos de rolagem só são acionados quando a rolagem é interrompida, enquanto isso a rolagem só ocorre ao mover um bitmap pela GPU. Se alguém souber de algum truque, irei atualizar este blog – seria incrível também oferecer suporte a dispositivos móveis de uma forma semântica.

A solução

O truque básico é fazer com que cada elemento seja posicionado com uma posição Z correta em relação à sua profundidade normal, que é 0,

translateZ: -30px

Aplique alguma perspectiva ao seu elemento corporal

body{
   -webkit-perspective: 500;
   -webkit-perspective-origin: 0 0;
 }

Agora você apenas atualiza a origem da perspectiva sempre que o usuário rola a página. Isso significa que todos os elementos serão movidos individualmente pela GPU e nenhum ciclo da CPU será desperdiçado para controlá-los. Já que você está realmente movendo a perspectiva, você também pode usar isso para mostrar objetos 3D reais como gráficos, pinos em um mapa, sombras, reflexos ou outras coisas legais que você possa imaginar.

Depois de aplicar a profundidade correta aos seus elementos, basta adicionar esta linha para reajustar a perspectiva:

 <script>
    window.onscroll = function(){
       document.body.style.webkitPerspectiveOrigin =
       window.scrollX + "px " + 
       window.scrollY + "px";
     }
</script>