30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Web Design
  2. CSS
Webdesign

Recriando o Efeito de Rolagem Parallax de Minitaturas da Apple TV

by
Difficulty:IntermediateLength:ShortLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

No tutorial anterior, mostramos como usar transformações 3D do CSS para criar uma grade de layout isométrica. Foi bem desafiador, já que poucos navegadores, como Firefox, possuem abordagens ligeriamente diferentes sobre como renderizar elementos em planos tridimensionais.

Nesse tutorial, continuaremos explorando transformações 3D, contruindo um efeito de rolagem parallax 3D, inspirado na interface da Apple TV. Ainda usaremos Envato Elements como inspiração de conteúdo. Eis o que faremos:

Passe o mouse sobre a miniatura e mov o cursor: a miniatura inclinará de acordo com a posição do cursor e direção do movimento.

Perspectiva: Resumo

Como seres humanos, nossa visibilidade é limitada pelo horizonte de fuga e nossa visão binocular criar o que entendemos por perspectiva. Ela nos ajuda a interpretar um objeto como estando longe ao invés, simplesmente, de ser menor.

A grade isométrica do tutorial anterior não leva "perspectiva" em consideração. O tamanho da grade—altura e largura—é mantido. Na verdade, deveríamos ver o lado mais distante da grade diminuir por conta da perspectiva.

No CSS, podemos adicionar perspectivas a transformações 3D com a função perspective(). Vale notar que perspective() precisa ser adicionada antes de outras funções de transformação, como rotate() e translate() para funcionar. Também requer um valor definindo a distância da visão relativa ao elemento: seja ele visto de longe ou de perto.


Eis como renderizamos um plano 3D com CSS. Agora, vejamos como aplicar isso à criação do efeito parallax. Começaremos com o HTML:

Marcação HTML

Comparando com o tutorial anterior, veremos que o HTML é bem parecido. Aqui, temos uma div com a classe ItemCard envolvendo o nome, a imagem e o link apontando para um dos itens na Envato Elements.

Adicione o código acima por completo.

CSS

Começamos adicionando estilos de recomposição, nese caso, configurando box-sizing para border-box, removendo margem do elemento figure e tornando a imagem fluida.

Isso feito, adicionamos alguns estilos a ItemCard. Além de regras estéticas, como border-radius e box-shadow, definimos a transição e transformação do elemento, incluindo a função perspective().

Para mais informações sobre o que cubic-bezier() faz aqui, veja o curso do Guy Routledge:

Meta Estilos

Agora, adicionamos os estilos dos elementos dilhos de ItemCard: nome, autor e categoria do item. Similarmente, os estilos definem visibilidade, posicionamento, tamanho, transição e transformação desses elementos.

Renderização 3D

Adicionemos os estilos abaixo para tornar os elementos filhos de ItemCard e .ItemCard__summary compatíveis com renderização tridimensional.

Sobreposição

O estilo de sobreposição de ItemCard define a box-shadow e o eixo Z de alguns elementos filho:

Agora, temos algo que lembra isso:

thumbnail image of one of items in Envato Elements
Estilos iniciais e de sobreposição

Efeito Parallax com jQuery

Agora, lançaremos mão do jQuery, então, garantamos que jQuery esteja disponível no documento. Na CodePen, adicionemos https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js como JavaScript externo.

O efeito parallax é aplicado por dois eventos jQuery, mouseover e mouseout. O evento mouseover é lançado quando o cursor move-se sobre o elemento alvo, nesse caso, .ItemCard. O mouseout é lançado quando o cursor deixa do elemento alvo

Durante o evento mousemove, obtemos as coordenadas do cursor, determinamos a rotação de ItemCard e aplicamos esses valores, adicionando estilos em linha. Durante o evento mouseout, removemos o estilo em linha para que ItemCard retorne à posição inicial.

E acabamos.

Resumindo

Nesse tutorial, aprendemos a usar transformações 3D para construir um efeito parallax 3D inspirado pela Apple TV.

Tenha em mente que esse efeito não funcionará bem em aparelhos com touchscreen, logo, precisaremos considerar algum tipo de resposta, possivelmente com Eventos Touch para replicar o efeito parallax–deixaremos como exercício!

Recursos Úteis

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.