O componente "Paralaxe"

Use o componente "Paralaxe" para criar a ilusão de profundidade com camadas de imagens. À medida que o usuário rola a página para cima ou para baixo em um dispositivo móvel, as imagens de primeiro e de segundo plano se movem em velocidades diferentes.

Esse componente é para uso exclusivo em criativos de paralaxe do Display & Video 360.

Para adicionar o componente "Paralaxe" ao seu projeto:

1. Abra o painel Componentes e a pasta Interação.
2. Arraste o componente Paralaxe para o cenário.
3. Clique duas vezes no componente para entrar no modo de edição.
4. Para adicionar camadas, arraste os arquivos de imagem do seu sistema até o cenário ou o painel Camadas (somente no Windows ou Mac). Como alternativa, clique no botão Adicionar imagens na parte inferior do painel Camadas. Somente imagens podem ser adicionadas como camadas.
5. Use as guias Início e Término para posicionar cada camada onde ela deve aparecer no início e no final da animação. Arraste a camada para onde quiser ou use os campos de posição Início e Final no painel Propriedades. Você também pode adicionar um estado intermediário passando o cursor à direita da guia Início e clicando no botão .
6. Defina outras opções de configuração conforme necessário.
7. Quando estiver satisfeito com o componente (você pode usar a visualização enquanto trabalha nele), clique em Salvar. Você retornará à interface normal do Google Web Designer.

Visão geral do componente "Paralaxe"

Opções de configuração

Para configurar o componente, clique duas vezes nele no cenário ou selecione-o e clique em Configurações… no painel Propriedades.

Adicionar camadas

Existem duas maneiras de adicionar uma camada:

• Arraste um arquivo do seu sistema (somente Mac ou Windows) ou da biblioteca até o cenário ou o painel Camadas.
• Clique no botão Adicionar imagens na parte inferior do painel Camadas.

As camadas no componente "Paralaxe" precisam ser imagens.

Mover camadas

1. Selecione a camada que você quer mover.
2. Selecione a guia Início, Meio ou Término. É possível adicionar um estado intermediário se você ainda não fez isso.
3. Use um dos seguintes métodos para posicionar a camada:
   • Arraste a camada para a nova posição.
   • Use as teclas de seta para mover a camada um pixel por vez. Segure a tecla Shift enquanto pressiona uma tecla de seta para mover a camada em 10 pixels nessa direção.
   • Defina as propriedades de posição Início, Meio ou Final na guia Propriedades da camada. Você só pode editar as propriedades correspondentes à guia atual. Use os botões Corresponder à posição inicial, Copiar a posição média ou Corresponder à posição final para copiar a outra posição.

Mude de guia para ajustar a posição da camada em outro ponto da animação.

Trocar imagens

1. No cenário, clique com o botão direito do mouse na imagem que você quer substituir e selecione Trocar imagem… no menu pop-up.
2. Selecione uma imagem da Biblioteca ou clique no botão Importar arquivos para selecionar um arquivo de imagem do computador.

A nova imagem substituirá a original. Se você tiver redimensionado a imagem trocada, a nova também usará as dimensões alteradas. Caso contrário, ela usará as dimensões originais.

Mudar a ordem das camadas

No painel Camadas, arraste uma camada para a nova posição na lista.

A ordem das camadas determina quais serão exibidas na frente. As camadas com posições mais altas aparecem na frente daquelas com posições mais baixas.

Excluir camadas

1. Selecione a camada que você quer excluir.
2. Clique no botão Excluir na parte inferior do painel Camadas ou pressione a tecla Delete.

Redimensionar camadas

1. Selecione a camada que você quer redimensionar.
2. No painel Propriedades da camada, defina a largura e a altura dela em pixels.
   • Clique no botão Restringir proporção para definir se a proporção entre largura e altura será fixa.

A camada é dimensionada de acordo com o tamanho especificado durante toda a animação.

Alterar a opacidade da camada

1. Selecione a camada que você quer editar.
2. No painel Propriedades da camada, defina a opacidade inicial ou final como um valor entre 0 e 1, sendo que 0 é transparente, e 1 é opaco.

Alterar o easing de animação da camada

1. Selecione a camada que você quer alterar.
2. No painel Propriedades da camada, selecione um tipo de easing na lista suspensa Easing.

O easing personalizado não está disponível.

Adicionar um estado intermediário

Para ter mais controle sobre a animação do componente "Paralaxe", adicione um estado intermediário e altere as propriedades da camada nesse ponto.

1. Passe o cursor à direita da guia Início e clique no botão . A guia Meio será exibida.
2. Por padrão, o estado intermediário será inserido a meio caminho entre o início e o fim da animação. É possível ajustar o tempo da animação.
3. Vá para a guia Meio para definir as propriedades da camada neste ponto.

Para remover o estado intermediário, passe o cursor à direita da guia Meio e clique no X.

Alterar o tempo da animação

O tempo de animação do componente "Paralaxe" é determinado pela distância percorrida até o fim ou para fora da página. Por padrão, a animação começa quando a borda superior do componente começa a ser visualizada na página (0%) e termina quando a borda inferior desaparece na parte superior página (100%). Se você adicionou um estado intermediário, também poderá ajustar quando ele ocorre durante a animação. Há duas maneiras de ajustar o tempo da animação:

• No painel Tempo da animação, arraste as caixas de início, meio e fim ou o controle deslizante para a porcentagem desejada.
• Insira as porcentagens inicial, intermediária e final nos campos do painel Tempo da animação.

Ocultar e mostrar camadas

No painel Camadas, clique na caixa ao lado da miniatura da camada (no botão Ocultar todas as camadas ).

É possível ocultar ou mostrar todas as camadas clicando no botão Ocultar todas as camadas .

Ocultar uma camada pode facilitar o trabalho em outra, além de impedir que a camada oculta apareça ao visualizar a configuração. No entanto, isso não afeta a visualização do navegador nem o criativo publicado.

Mostrar e ocultar o estado inativo

1. Selecione uma camada.
2. No painel Propriedades da camada, em Propriedades avançadas, clique no botão de ativação Mostrar o estado inativo.

O estado inativo é uma versão translúcida da camada em qualquer posição que você não está editando no momento. Assim, é possível comparar visualmente as posições inicial, intermediária e final. O estado inativo é apenas para referência e não é exibido nas visualizações nem no arquivo publicado.

Propriedades

Propriedades do componente

As propriedades do componente são visíveis no painel "Propriedades". É necessário sair do modo de edição de componente.

Propriedade	Descrição
Nome	É o nome do componente "Paralaxe".
Fator de rolagem	Um número entre 0 e 1 representa a distância percorrida pela rolagem do visualizador. Essa propriedade é usada somente para exibição no cenário do Google Web Designer. O padrão é 0,5.

Propriedades da camada

Você poderá ver e editar as propriedades da camada quando estiver no modo de edição de componentes.

Propriedade	Descrição
Nome	Indica o nome da camada. Não é editável.
Início	Mostra a distância em pixels ou em porcentagem entre a camada e o lado esquerdo e a parte superior do componente quando ele aparece pela primeira vez, ou seja, quando a borda superior do componente está na borda inferior da janela de visualização. É possível editar o valor quando a guia Início está selecionada.
Meio	Mostra a distância em pixels ou em porcentagem entre a camada e o lado esquerdo e a parte superior do componente no estado intermediário da animação. É possível editar o valor quando a guia Meio está selecionada.
Término	Mostra a distância em pixels ou em porcentagem entre a camada e o lado esquerdo e a parte superior do componente quando ele está prestes a sair da visualização, ou seja, quando a borda inferior do componente está na borda superior da janela de visualização. É possível editar o valor quando a guia Término está selecionada.
Tamanho	Indica a largura e a altura da camada. Afeta a camada por toda a duração da animação.
Opacidade	Indica a opacidade inicial e final da camada, representada por um número entre 0 (transparente) e 1 (opaco).
Easing	Informa o tipo de easing da animação da camada. O easing personalizado não está disponível.
Mostrar o estado inativo	Quando ativada, uma versão translúcida da camada é exibida em posições inativas, ou seja, posições que você não está editando no momento.

Eventos

Use eventos para ativar outras ações no anúncio. O componente "Paralaxe" envia o seguinte evento:

Evento	Descrição
Paralaxe carregada	É enviado quando o componente está pronto para exibição.

Visualização

Durante a configuração

Você pode visualizar o componente "Paralaxe" enquanto estiver trabalhando nele:

1. Clique duas vezes no componente no cenário para entrar no modo de edição.
2. Clique na guia Visualização na parte superior.
3. Role a página para cima e para baixo para ver como as camadas visíveis se comportam em um layout de dispositivo móvel de exemplo. As camadas ocultas não serão exibidas.
4. Não é possível editar o componente durante a visualização. Clique na guia Início, Meio ou Término, faça as alterações e clique na guia Visualização novamente para ver essas alterações.

No navegador

Para visualizar o componente no navegador, saia do modo de edição de componente e use o botão Visualizar no Google Web Designer. A página de visualização simula como o anúncio é exibido em uma página da Web com conteúdo suficiente para você rolar a tela acima e abaixo do componente.

É possível selecionar as seguintes opções do modo de visualização:

• Dispositivo: selecione um dispositivo móvel ou Personalizado.
• Girar o dispositivo : alterne entre retrato e paisagem.
• Tamanho da janela de visualização: se você selecionar Personalizado para o dispositivo, poderá definir um novo tamanho editando esse campo ou arrastando as alças de redimensionamento da visualização.

Os anúncios de paralaxe sempre usam o modo de visualização correspondente no navegador.