Saiba como adicionar e usar vários tipos de efeitos de rolagem, como peça a peça, menu deslizante, rolagem e muito mais.

Observação:

O Adobe Muse não está mais adicionando novos recursos e suspenderá o suporte em quinta-feira, 26 de março de 2020. Para obter informações detalhadas e assistência, consulte a a página de fim de serviço do Adobe Muse.

Design de ideias para efeitos de rolagem

Nesta seção, você verá algumas maneiras de usar efeitos de rolagem para adicionar recursos interativos, navegação exclusiva do site, além de gráficos expressivos de movimento aos sites do Muse.

Para começar, siga as etapas abaixo:

  1. Visite o site de amostras ativo e clique em cada seção para ver exemplos de cada meta. Navegue até a página de exemplos para ver como os efeitos de rolagem controlam a exibição dos elementos da página.
  2. Navegue até o final do site ativo de amostra para baixar o arquivo .muse.
  3. Abra o site de amostras e examine o projeto na área de trabalho do Muse.
  4. Abra o painel Camadas e expanda a seção intitulada Conteúdo para exibir os elementos usados na criação de cada instância.

O efeito peça a peça

Esse efeito faz com que um conjunto de elementos individuais salte e se reagrupe no design da página, à medida que o visitante rola para baixo a página. Os gráficos e quadros de texto são controlados usando efeitos de rolagem que criam compilação interativa, como se as peças de um quebra-cabeça se juntassem. Essa é uma maneira intrigante de exibir detalhes do produto em uma página web.

O fluxo de trabalho deste exemplo mostra a seção Movimento inicial do painel Efeitos de rolagem para unir os elementos em um design consolidado. Depois que cada peça vai para seu lugar, as configurações de Movimento final são definidas como 0, para impedir que os elementos existentes se movam quando novos elementos são inseridos.

Siga estas etapas para criar um efeito peça a peça semelhante:

  1. Na visualização Design, escolha Página > Propriedades da página. Defina o campo Altura mínima para um valor muito maior. No exemplo do site, a altura mínima de página é definida como 14,120 pixels.
  2. Use a ferramenta Texto para criar um quadro de texto e insira o conteúdo de texto desejado.
  3. Abra a guia Movimento do painel Efeitos de rolagem e ative a caixa de seleção Movimento. Neste exemplo, as configurações da seção Movimento inicial fazem com que o quadro de texto se mova para baixo 0,25 vez (uma velocidade que é um quarto) da velocidade de rolagem. Quando a página alcança a posição-chave do quadro de texto, o quadro de texto atinge seu local na visualização Design. Assim, as configurações de Movimento final (valores 0 para ambas as direções) fazem com que o primeiro elemento permaneça no lugar, como se o elemento tivesse sido fixado.
  4. Um arquivo PNG com transparência (um contorno de telefone celular) é posicionado abaixo do quadro de texto. Esse elemento usa as configurações da guia Movimento para saltar da lateral esquerda da página, ir para a posição e permanecer lá.
  5. Logo atrás do contorno de telefone, um elemento branco menor segue um padrão de movimento similar, saltando a partir do lado esquerdo da página e ficando em posição. O gráfico branco simula o receptor na parte superior de um telefone celular. Este recurso (chamado phone-earpiece.png) é disposto acima do contorno do celular no painel Camadas, portanto é exibido acima do contorno do telefone no design. 
  6. Diretamente atrás do receptor, um elemento em branco pequeno que simula o botão de um telefone salta do lado direito, imitando o comportamento do receptor e também se exibindo acima do contorno do telefone celular no design.
  7. Em seguida, um gráfico retangular colorido iluminado com um gradiente sutil que flui verticalmente do branco ao cinza-claro usa a guia Movimento do painel Efeitos de rolagem para mover para a posição, de modo a se encaixar perfeitamente dentro da área central transparente do contorno do celular. Uma vez em posição, permanece no lugar, dando a aparência da tela do telefone. O elemento de tela (phone-screen.png) é disposto na parte inferior do painel Camadas e é organizado para ser exibido atrás de todos os outros elementos de design da página.
  8. Um grupo de quatro retângulos (preenchidos com as cores azul, verde, amarelo, e vermelhos sólidos) vai, em seguida, para a posição. Para criar o efeito de difundido que salta junto, cada um dos retângulos é definido com direções e velocidades diferentes na guia Movimento do painel Efeitos de rolagem. O retângulo azul move-se para baixo e para a direita, o retângulo verde e amarelo move-se para cima e para a direita e o retângulo vermelho move-se para cima e para a esquerda nas seções Movimento inicial. Na seção Movimento final, todos os retângulos têm uma configuração de 0 para ambas as direções — fazendo com que cada elemento se comporte como se estivesse fixo no lugar após chegar ao destino final na tela do telefone celular.
  9. Depois que todas as outras peças são reunidas, um segundo campo de texto move-se para cima, para residir abaixo do primeiro campo de texto, movendo-se a uma velocidade que é 0,5 vez (metade) a velocidade da rolagem da página.

E finalmente, há dois elementos restantes na parte inferior: um retângulo sólido que é preenchido com a mesma cor sólida da página (a renderização é invisível no design) e um grupo de objetos (um retângulo amarelo com um gráfico em forma de lâmpada) atrás dele.

O retângulo colorido sólido está lá para ocultar o grupo, que é organizado atrás dele.

Efeito de rolagem peça a peça no Adobe Muse
Efeito de rolagem peça a peça no Adobe Muse

Observação:

Enquanto ambos os elementos são selecionados, observe que os valores que são os mesmos para todos os itens selecionados são exibidos no campo. Neste exemplo, o retângulo e grupo são definidos como 0 no sentido vertical na seção Movimento inicial, e 0.0 na seção Movimento final. Nenhum valor é exibido no campo horizontal da seção Movimento inicial, porque o grupo é definido para se mover à esquerda a 1 vez (a mesma velocidade) da velocidade de rolagem, enquanto o retângulo é definido como 0.  

  1. O retângulo é fixado basicamente no local e nunca se move, porque todos os valores nos campos Movimento inicial e Movimento final são definidos como 0. À medida que a página rola para posição-chave do grupo que contém o gráfico de lâmpadas, ele se move para a esquerda, tornando-se visível, já que não está mais oculto pelo retângulo acima dele. O grupo de lâmpada é disposto acima do elemento de tela do telefone celular, mas abaixo do contorno do telefone, de modo que o gráfico de lâmpada parece se encaixar no lugar (semelhante a uma transição de telefone real que ocorre em um deslizamento horizontal). O grupo de lâmpadas cobre o retângulo gradiente que estava representando anteriormente a tela do telefone.

Como se pode ver neste exemplo simples, é possível usar uma combinação de uma página muito alta, uma série de elementos dispostos estrategicamente no painel Camadas e na guia Movimento do painel Efeitos de rolagem, para criar a ilusão de peças que se juntam em uma animação enquanto a página rola para baixo.

O efeito do menu deslizante usa muitas das mesmas convenções descritas no efeito peça a peça. Os elementos aparecem se deslocar usando a guia Movimento do painel Efeitos de rolagem, e o retângulo oculta alguns elementos até que estejam prontos para serem revelados no design da página.

Este exemplo usa grupos de retângulos posicionados estrategicamente para criar a aparência de um design angular complexo.

Consulte o site de amostras em um navegador para observar o avião voar horizontalmente na página da direita para a esquerda, seguido de um conjunto de opções de menu estilizado e um plano de fundo gradiente com listras diagonais.

Siga estas etapas para criar um efeito deslizante semelhante:

  1. Na visualização Design, escolha Página > Propriedades da página. Defina o campo Altura mínima para um valor muito maior. No exemplo do site, a altura mínima de página é definida como 4.665 pixels.
  2. A imagem do avião é disposta acima de todos os outros conteúdos na página, de forma a aparecer no topo da lista do painel Camadas. É definida para se mover à esquerda e direita antes e depois de sua posição-chave na guia Movimento do painel Efeitos de rolagem.
Efeito do menu deslizante em efeitos de rolagem do Adobe Muse
Efeito do menu deslizante em efeitos de rolagem do Adobe Muse

  1. Quatro quadros de texto são configurados para se deslocarem à esquerda e se empilharem verticalmente para criar o menu de navegação. Na guia Movimento do painel Efeitos de rolagem, cada quadro de texto tem a mesma velocidade (1,25 vez a velocidade de rolagem) na seção Movimento inicial. Cada quadro de texto também tem uma posição-chave diferente. Quando a página rola para baixo, cada quadro de texto desliza para sua na posição, alinhando-se no lado esquerdo do design. Todos os quadros de texto têm 0.0 valores na seção Movimento final, fazendo com que os itens de menu permaneçam na posição, uma vez em posição.
  2. Os quadros de texto são preenchidos com uma cor sólida de fundo, embora à primeira vista pareçam ser imagens porque exibem laterais em diagonal, em vez de bordas verticais retas. Esse efeito é alcançado estendendo um grupo de três retângulos sobre os quadros de texto, que são preenchidos com a mesma cor sólida que a cor de preenchimento do navegador.
Agrupar e organizar retângulos acima dos itens de menu para criar arestas angulares à esquerda e à direita.
Agrupar e organizar retângulos acima dos itens de menu para criar arestas angulares à esquerda e à direita.

  1. A animação do quadro de texto é oculta inicialmente por outro grupo de retângulos, porque os quadros de texto são organizados abaixo no painel Camadas. O grupo é uma combinação de três retângulos: um retângulo maior com um gradiente vertical e outros dois retângulos menores (um quadrado e um girado) que é preenchido com uma cor sólida que corresponde à cor superior do gradiente.
  1. Se você rolar para baixo para examinar a parte inferior do grupo, verá uma série de mais quatro retângulos com larguras variáveis que são girados e alinhados acima do canto inferior direito do retângulo gradiente maior.
Girar retângulos com preenchimento da mesma cor que o preenchimento da página para desativar fatias na extremidade dos retângulos com preenchimento gradiente.
Girar retângulos com preenchimento da mesma cor que o preenchimento da página para desativar fatias na extremidade dos retângulos com preenchimento gradiente.

Os grupos são ideais para combinar um conjunto de elementos e controlá-los como um único item. Neste exemplo, grupos de retângulos diferentes têm efeitos de rolagem de movimento aplicados para fazer com que o grupo se mova como uma única entidade.

Esse exemplo também ilustra o uso criativo de espaço negativo. Se o preenchimento de navegador tiver uma cor sólida de fundo aplicada, você poderá criar vários efeitos interessantes, estendendo vários retângulos preenchidos com a mesma cor acima dos outros retângulos. Em vez de criar gráficos em um programa de edição de imagens e colocá-los uma única imagem, use os retângulos para criar gráficos no espaço de trabalho do Muse.

Atenuar

Este exemplo de um nascer do sol e pôr do sol animado é obtido usando uma combinação de dois efeitos de rolagem: movimento e opacidade. Este exemplo exibe um plano de fundo de página de cor de preenchimento gradiente com uma única imagem PNG do sol. A imagem PNG inclui áreas transparentes que permitem que a cor do plano de fundo da página de preenchimento apareça.

Verifique o site de exemplo em um navegador para ver como o sol é atenuado de 100% de transparência para se mover na página. Em seu pico, é totalmente opaco, mas à medida que você continua a rolar para baixo na página, o sol se põe e torna-se incrementalmente mais transparente novamente até desaparecer.
Siga estas etapas para criar um efeito de atenuação semelhante:

  1. Na visualização Design, escolha Página > Propriedades da página. Defina o campo Altura mínima com um valor maior que o monitor médio possa exibir, para que a página possa rolar. No exemplo do site, a altura mínima da página é definida como 2.988 pixels.
  2. A imagem do sol é colocada no centro da página. Na guia Movimento do painel Efeitos de rolagem, a posição-chave é definida como 1410 pixels. Observe também as configurações das seções Movimento inicial e Movimento final.
Defina as configurações de movimento inicial e final para o efeito Esmaecer.
Defina as configurações de movimento inicial e final para o efeito Esmaecer.

Essas configurações fazem com que o sol se mova em um caminho semicircular, formando arcos do lado inferior esquerdo da página até o centro (conforme a posição-chave é alcançada) e para trás, para o lado direito inferior da página.

  1. Enquanto o sol ainda está selecionado, clique na guia Opacidade para ver suas configurações. A Posição de atenuação 1 é definida como 726 pixels (acima do sol). A Posição de atenuação 2 é definida como 1.925 pixels (abaixo do sol). O sol começa com uma opacidade de 0% (completamente transparente), e então torna-se completamente opaco conforme a página rola para sua posição-chave. Quando a página rola após a posição-chave do sol, a opacidade vai de 100% a 0%, para criar o efeito de aparecimento e desaparecimento.
Ajuste a intensidade da transparência na guia Opacidade do painel Efeitos de rolagem.
Ajuste a intensidade da transparência na guia Opacidade do painel Efeitos de rolagem.

  1. Para testar a página, escolha Arquivo > Visualizar página no navegador. Role a página para ver o sol começar a aparecer até desaparecer e mova-se para baixo, para a direita, durante a atenuação.
  2. Feche o navegador e retorne à área de trabalho do Muse.

Edge Animate

Este exemplo ilustra como controlar arquivos OAM exportados do Adobe Edge Animate usando efeitos de rolagem. Neste exemplo, a página é preenchida com um gradiente vertical que começa com uma cor clara e as transições de turquesa em azul escuro.

Uma combinação de configurações aplicadas nas guias Movimento e Edge Animate cria o efeito animado.

Três instâncias do mesmo arquivo OAM são colocadas lado a lado horizontalmente, para criar uma linha de compassos animados. Quando vir a amostra do site em um navegador, todos os três compassos se movem para a exibição e permanecem na posição. Cada um dos três compassos parece ser fixado em velocidades diferentes, mas são as configurações do painel Efeitos de rolagem, não a criação do arquivo de animação do Edge, que fazem com que se movimentem em velocidades diferentes.

Siga estas etapas para criar um efeito semelhante com três arquivos OAM inseridos:

  1. Na visualização Design, escolha Página > Propriedades da página. Defina o campo Altura mínima para um valor muito maior. No exemplo do site, a altura mínima de página é definida como 7.465 pixels.
  2. Selecione as três ocorrências de bússola na página. Na guia Movimento do painel Efeitos de rolagem, você pode ver que os três arquivos OAM têm as mesmas configurações de movimento e posição-chave, porque todos os valores são exibidos.
Crie efeito animado para arquivos OAM usando efeitos de rolagem
Crie efeito animado para arquivos OAM usando efeitos de rolagem

Se você visualizar o exemplo em um navegador, verá os três elementos OAM saltarem em uníssono e permanecerem em uma linha, apesar de terem sido fixados.

  1. Clique fora da bússola para desmarcar todos os três, e selecione apenas a bússola à esquerda. Mantenha pressionada a tecla Shift ao selecionar a bússola da direita, para que ambas sejam selecionadas. Abra a guia Edge Animate do painel Efeitos de rolagem para revisar as configurações.
Desmarque as três bússolas e selecione a bússola à esquerda e à direita.
Desmarque as três bússolas e selecione a bússola à esquerda e à direita.

As duas bússolas laterais são configuradas para percorrer a animação da linha do tempo e avançar para o próximo quadro cada vez que a página rolar 350 pixels para baixo.

  1. Desmarque as duas bússolas externas. Selecione bússola central e olhe na guia Edge Animate novamente para ver se o campo Alternar quadros a cada está definido como 400 pixels. Essa configuração faz com que a animação central se mova mais lentamente em comparação com as duas bússolas externas.
Selecione a bússola central e selecione a configuração de efeitos de rolagem.
Selecione a bússola central e selecione a configuração de efeitos de rolagem.

Você pode criar efeitos de animação interessantes variando a velocidade de várias animações do Edge Animate, em relação à velocidade de rolagem da página. Por exemplo, você pode criar um cardume de peixes, um céu preenchido com nuvens em movimento, ou outros efeitos adicionando várias iterações do mesmo arquivo OAM com diferentes configurações de efeito de rolagem aplicados.

Efeito de apresentação de slides

É possível controlar como o conjunto de imagens em um widget de apresentação de slides é exibido com relação à forma de rolagem da página. Isso envolve adicionar um widget de apresentação de slides a uma página e usar a guia Apresentação de slides no painel Efeitos de rolagem para atualizar as opções de apresentação de slides.

Neste exemplo, a apresentação de slides é preenchida com uma série de imagens que criam uma exibição de rotação de 360 graus de um badge. Você pode obter imagens similares de apresentação de slides configurando um tripé e tirando fotos de um objeto que é inserido em uma posição de rotação. Esse efeito é útil para exibir uma descrição de produto interativo, para ajudar clientes em potencial a ver um item de todos os ângulos antes de comprá-lo.

Siga estas etapas para criar um efeito semelhante usando um widget de apresentação de slides:

  1. Na visualização Design, escolha Página > Propriedades da página. Defina o campo Altura mínima para um valor muito maior. No exemplo do site, a altura mínima de página é definida como 7.465 pixels.
  2. Um quadro de texto com as palavras Superpack é configurado para usar efeitos de rolagem. Na guia Movimento, defina as configurações de Movimento inicial para mover o texto da esquerda para a direita, movendo na mesma velocidade de rolagem da página. Nas configurações de Movimento final, ambas as direções estão definidas como 0, para que o quadro de texto permaneça no local como se estivesse fixo na página.
     
Ative a caixa de configuração Movimento e configure os efeitos de rolagem para mover o quadro de texto para a direita.
Ative a caixa de configuração Movimento e configure os efeitos de rolagem para mover o quadro de texto para a direita.

  1. Abra a Biblioteca de widgets e arraste um widget de apresentação de slides para o centro da página, à direita do destino final do quadro de texto.
  2. Use a opção Adicionar imagens do menu Opções para preencher a apresentação de slides com arquivos de imagem. 

Quando a Apresentação de slides é selecionada, você pode selecionar o widget de Apresentação de slides e usar a interface de fixação no painel de controle para fixar a Apresentação de slides. Você também pode experimentar adicionar um widget de Apresentação de slides de tela cheia e controlá-lo com efeitos de rolagem. 

  1. Enquanto a apresentação de slides é selecionada, abra a guia Apresentação de slides no painel Efeitos de rolagem e ative a opção Apresentação de slides.
  2. Arraste a alça T ou insira um valor no campo para definir a posição-chave. Neste exemplo, a posição-chave for definida em 1.066 pixels.
  3. Ative o botão de opção Alternar slides a cada e defina o campo abaixo dele para 50 pixels.
Defina apresentação de slides para avançar para a próxima imagem sempre que a página rolar para baixo outros 50 pixels.
Defina apresentação de slides para avançar para a próxima imagem sempre que a página rolar para baixo outros 50 pixels.

  1. Teste a página no modo de Visualização ou em um navegador. Navegue até a página para ver o badge girar. Você também pode criar imagens que parecem se deslocar para cima ou para baixo , preenchendo a apresentação de slides com uma série de arquivos de imagens semelhantes, mas levemente diferentes, semelhantes aos quadros em um GIF animado.
  2. Depois de testar os efeitos de rolagem, retorne à visualização Design no em Muse para continuar a editar as páginas.

A rolagem

Usando efeitos de rolagem, você pode criar uma página muito longa quebrada em seções com aparências radicalmente diferentes. Conforme o visitante rola para baixo uma página, eles fazem transição entre seções de página que parecem rolar, com efeitos de texto animado e bordas separadas criadas com um efeito de sombra.

Você pode usar marcas de ancoragem ou simplesmente adicionar uma nota para incentivar os visitantes a rolar para baixo na página para ver cada uma das seções. Quando estiver na parte inferior do site de exemplo e clicar novamente no botão Voltar ao início, você verá a página inteira se mover quando o link de ancoragem retornar à parte superior do design da página.

Siga estas etapas para criar um efeito semelhante de rolagem:

  1. Na visualização Design, escolha Página > Propriedades da página. Defina o campo Altura mínima para um valor muito maior. No exemplo do site, a altura mínima de página está definida como 16.990 pixels.
  2. No menu Preenchimento do navegador, defina a cor de preenchimento do navegador como azul sólido.
Defina a cor de preenchimento do navegador no menu Preenchimento do navegador.
Defina a cor de preenchimento do navegador no menu Preenchimento do navegador.

  1. Quando a página inteira estiver selecionada, use o menu de preenchimento para definir a cor da página como Nenhum, para que a cor de preenchimento do navegador fique visível.
  2. Navegue até a página aproximadamente 2.248 pixels a partir de cima. Use a ferramenta Retângulo para desenhar um retângulo com 3.000 pixels de pixels de largura por 2.000 pixels de altura. Use a ferramenta Seleção para centralizar o retângulo na página, com ambos os lados ultrapassando os lados da janela do navegador.
  3. Enquanto o retângulo ainda está selecionado, use o menu Preenchimento para definir uma cor verde de preenchimento verde sólida. Use o menu Efeitos para definir um efeito de sombra.
Adicione um efeito de Sombra ao retângulo para criar uma borda mais surpreendente.
Adicione um efeito de Sombra ao retângulo para criar uma borda mais surpreendente.

  1. Com o retângulo verde selecionado, ative a caixa de seleção Movimento na guia Movimento do painel Efeitos de rolagem. Clique e arraste a alça T e contraia-a para que a posição-chave seja colocada na borda superior do retângulo, que é 2.248 pixels no site de exemplo.
  1. Na seção Movimento inicial, defina o retângulo para se mover para baixo a uma velocidade de 1,5 vez a velocidade da rolagem. Defina todas as instruções restantes como 0.
  2. Use a ferramenta Texto para criar um campo de texto próximo à parte superior do retângulo verde. Neste exemplo, o campo de texto informa: Esta é a rolagem. Entretanto, é possível inserir o conteúdo de texto e aplicar a formatação de texto preferida.
  3. Enquanto o quadro de texto é selecionado, ative a guia Movimento do painel Efeitos de rolagem. Arraste a alça T para alinhá-la com a borda superior do retângulo verde e atualizar as configurações para controlar como o quadro de texto será exibido com base na rolagem da página.
Alinhe a alça T com a borda superior do retângulo verde.
Alinhe a alça T com a borda superior do retângulo verde.

  1. Defina direção descendente do Movimento inicial a 1,5 vez a velocidade da rolagem. Defina os demais valores no painel como 0. Isso faz com que o campo de texto se mova para baixo, na mesma direção e velocidade do retângulo verde. O retângulo e o quadro de texto permanecem no lugar depois que a rolagem da página passa sua posição-chave.
  2. Se você clicar em Visualizar, poderá rolar para baixo e ver como o retângulo verde e o campo de texto rolam do topo para a exibição. Clique em Design ao concluir o teste para continuar a editar a página.
  3. Use o menu Exibir para diminuir para 10% o design do site. Selecione o retângulo verde e o campo de texto. Mantenha pressionada a tecla Opção/Alt enquanto arrasta os dois elementos para baixo na página, para duplicá-los. Defina a cor de preenchimento do retângulo duplicado para azul-escuro e use a ferramenta de texto para atualizar o conteúdo do texto.
Atualize a cor de preenchimento de fundo do retângulo duplicado e altere o conteúdo do quadro de texto para a nova seção da página.
Atualize a cor de preenchimento de fundo do retângulo duplicado e altere o conteúdo do quadro de texto para a nova seção da página.

Neste exemplo, o quadro de texto duplicado tem o texto: Use-o para alterar drasticamente a aparência do seu site. Entretanto, você pode inserir o texto que preferir para identificar a seção azul-escuro da página.

  1. Usando a ferramenta Seleção, posicione o retângulo duplicado e o quadro de texto a aproximadamente 5.448 pixels abaixo da parte superior da página.
  2. Quando o retângulo azul-escuro for selecionado, verifique a guia Movimento do painel Efeitos de rolagem. A posição-chave foi atualizada automaticamente para o novo local do retângulo (5.448 px) e a direção decrescente na seção Movimento inicial é ainda definida para mover a uma taxa de 1,5 vez a velocidade de rolagem (e todos os demais valores são definidos como 0). Se você verificar o quadro de texto duplicado, verá que os efeitos de rolagem são preservados também para o elemento duplicado.
  3. Repita as etapas 12 e 13 mais quatro vezes, crie um total de seis grandes retângulos diferentes com quadros de texto acima deles. Cada retângulo tem as configurações de efeito de sombra e efeito de rolagem já aplicadas. Posicione os últimos quatro retângulos nas seguintes posições-chave: 8.648 pixels, 11.852 pixels, 15.058 pixels, e 18.251 pixels, para que cada seção seja separada por aproximadamente 1.200 pixels.
  4. Use o menu de preenchimento para definir a cor de preenchimento de retângulos para aplicar cores diferentes. Experimente aplicar preenchimentos de cor sólido e gradiente para que cada seção da página se destaque e contraste com as outras seções.
  5. Use a ferramenta Texto para atualizar o conteúdo de texto de cada seção. Por exemplo, você pode alterar cada um para refletir a cor de plano de fundo do retângulo abaixo dele, desta forma: Esta é a seção azul.
  6. Para testar a página, escolha Arquivo > Visualizar página no navegador. Role a página para exibir as diferentes seções e substituí-las pela próxima seção de página.
  7. Feche o navegador e retorne à área de trabalho do Muse.

Texto dinâmico

Você pode criar designs tipográficos incomuns usando uma combinação de efeitos de rolagem de movimento e fontes da Web do Adobe Edge. Fontes da Web permitem um estilo de texto com uma grande variedade de fontes, que são carregadas quando a página é carregada. Em vez de posicionar e animar imagens de texto criadas em um programa de edição de imagens, você pode criar páginas que pareçam maiores e sejam mais fáceis de atualizar usando fontes da Web do Edge. E os efeitos de rolagem criam um senso surpreendente de animação conforme a página é rolada para baixo.

Siga estas etapas para criar um efeito semelhante com texto dinâmico:

  1. Na visualização Design, escolha Página > Propriedades da página. Defina o campo Altura mínima para um valor muito maior. No exemplo do site, a altura mínima da página é definida como 4.854 pixels.
  2. Defina a cor de preenchimento da página como Nenhum. A cor do preenchimento do navegador não importa, porque a página será coberta por um longo retângulo na próxima etapa.
  3. Use a ferramenta Retângulo para desenhar um retângulo grande de aproximadamente 1.159 pixels de largura por 4.854 pixels de altura. Use o menu de preenchimento para o retângulo com uma cor de preenchimento sólida ou gradiente. Neste exemplo, uma cor gradiente de verde-azulado a fúcsia será aplicada como preenchimento. Use a ferramenta Seleção para centralizar o retângulo de forma a preencher a área inteira do navegador. Se desejar, você pode aplicar menos zoom para garantir que o retângulo seja centralizado na página.
Diminua o zoom e posicione o retângulo no centro da página longa.
Diminua o zoom e posicione o retângulo no centro da página longa.

  1. Após centralizar o retângulo, defina a ampliação no menu Visualizar de volta a 100%.
  2. No lado esquerdo da página, use a ferramenta Texto para criar um conjunto de quadros de texto. Neste exemplo, há um total de cinco quadros de texto. O conteúdo de cada quadro de texto é listado abaixo, mas sinta-se à vontade para inserir o texto de sua preferência em cada quadro de texto:
    • Cinco quadros
    • Rolagem
    • Em diferentes velocidades irá
    • Criar
    • Tensão dinâmica

Como etapa extra opcional, é possível duplicar os quadros de texto e aplicar estilos ligeiramente diferentes. Neste exemplo, o quadro de texto com a palavra Criar foi duplicado e as duas iterações dispostas em camadas na parte superior de cada uma, para criar um efeito de sombra projetada azul-claro.

  1. Use a ferramenta Texto para selecionar cada um dos quadros de texto. Use o painel de texto (ou as opções de formatação de texto no painel de controle) para aplicar diferentes fontes da Web, tamanhos de fontes, cores e outras configurações de tipografia para que cada quadro de texto se destaque.
  2. Selecione todos os quadros de texto. Enquanto estão selecionados, abra a guia Movimento do painel Efeitos de rolagem. Insira o mesmo valor numérico para definir a posição-chave de todos os quadros de texto selecionados de uma só vez. (Neste exemplo, a posição-chave é definida como 1.372 pixels). Defina também a direção horizontal das seções Movimento inicial e movimento final. Defina todas as direções verticais das seções Movimento inicial e Movimento final como 0 para que os quadros de texto não se movam verticalmente.
  3. Clique fora dos quadros de texto, depois clique em cada quadro de texto individualmente. Insira valores ligeiramente diferentes para cada um dos quadros de texto. Na lista abaixo, o primeiro valor tem velocidade do Movimento inicial e o segundo valor tem a velocidade do Movimento final para a direção horizontal (direita):
    • Cinco quadros: 0,9x, 0,1x
    • Rolagem: 0,12x, 0,5x
    • Em diferentes velocidades: 0,7x, 0,17x irá
    • Criar: 1,1x, 0,005x
    • Tensão dinâmica.: 1x, 0,01x

Observação:

Para duplicar um quadro de texto para criar o efeito de sombra projetada, você pode agrupar duas ou mais iterações de um quadro de texto e controlá-las como um único grupo ao aplicar efeitos de rolagem.

  1. Use a ferramenta Texto para criar um campo de texto e digite o número 5 no lado direito da página. Além de isso, você pode escolher duplicar o quadro de texto e aplicar cores e formatação de texto diferentes para dar a ilusão de bordas angulares e sombras projetadas. Se você criar duplicatas de um quadro de texto para fins de design, agrupe os quadros de texto para que possa aplicar efeitos de rolagem ao grupo.
  2. Enquanto o campo de texto com o número 5 é selecionado, ative a caixa de seleção Movimento na guia Movimento do painel Efeitos de rolagem. Defina a posição-chave numericamente ou arrastando a alça T (neste exemplo, é 1.425 px). Na seção Movimento inicial, defina o elemento para mover para a esquerda a 1 vez a velocidade da rolagem. Na seção Movimento final, defina o elemento para mover para a esquerda 0,01x a velocidade da rolagem.
  3. Para testar a página, escolha Arquivo > Visualizar página no navegador. Role a página para ver os cinco quadros de texto se moverem para a página a partir da esquerda enquanto o quadro de texto com o número 5 se move da direita. Role para cima ou para baixo para ver os quadros de texto animados.
  4. Feche o navegador e retorne à área de trabalho do Muse.
     

Você pode criar uma navegação de site interativa e envolvente usando efeitos de rolagem, de modo que os diferentes botões se movam para a área visível na página e alinhem-se para criar uma barra de menus. Neste exemplo, quatro botões de rolagem movem-se para cima a partir da parte inferior da página enquanto ela é rolada e ficam bloqueados na posição para exibir uma barra de menus vertical.

Depois que os quatro botões são alinhados, o conteúdo de plano de fundo (na forma de um gráfico de lâmpada, área de fundo colorida, quadro de texto e listras de vértice diagonais) saltam dos dois lados da página para criar uma seção do site.

Embora os botões não sejam estejam vinculados neste exemplo, você pode adicionar links usando o menu suspenso de hiperlinks para que os visitantes possam clicar para carregar uma página nova ou usar marcas de ancoragem para ir até um local diferente na página atual.

Siga estas etapas para criar um efeito semelhante de menu empilhado:

  1. Na visualização Design, escolha Página > Propriedades da página. Defina o campo Altura mínima para um valor muito maior. No exemplo do site, a altura mínima de página é definida como 7.465 pixels.
  2. Defina a cor de preenchimento da página para Nenhum e defina o preenchimento do navegador como uma cor sólida. No site de exemplo, o preenchimento do navegador é definido como castanho-claro.
  3. Use a ferramenta Texto para criar um novo quadro de texto. Digite a palavra Início. Use as opções de formatação no painel de controle para adicionar uma cor de plano de fundo ao quadro de texto. Atualize também as opções de formatação para o estilo de texto desejado. Use as alças laterais do botão para expandir sua largura e altura para aproximadamente 300 pixels de largura por 115 pixels de altura.
Use as opções no painel de controle para dar estilo ao quadro de texto.
Use as opções no painel de controle para dar estilo ao quadro de texto.

  1. Abra o painel Estados. Selecione o estado de rolagem e adicione outra cor de preenchimento (ou estilo conforme necessário) para criar um botão de rolagem.
Selecione o estado de rolagem e o estilo do botão para exibir uma aparência diferente em comparação ao estado normal.
Selecione o estado de rolagem e o estilo do botão para exibir uma aparência diferente em comparação ao estado normal.

  1. Após atualizar o estado de rolagem, selecione o estado Normal novamente.
  2. Abra a guia Movimento do painel Efeitos de rolagem. Quando o botão estiver selecionado, ative a caixa de seleção Movimento. Defina a posição-chave arrastando alça T ou digitando um valor numérico. Defina também a seção Movimento inicial para mover a uma velocidade de 0,75 vez a velocidade de rolagem. Deixe todos os demais campos definidos como 0.
Ative os efeitos de rolagem na guia Movimento e defina a direção e a velocidade do movimento.
Ative os efeitos de rolagem na guia Movimento e defina a direção e a velocidade do movimento.

  1. Mantenha pressionada a tecla Opção/Alt enquanto arrasta o botão Início mais abaixo na página. Isso cria uma duplicata do botão. Verifique se a duplicata está alinhada verticalmente com o botão Início original. Quando os dois elementos estão alinhados e a duplicata ainda está selecionada, uma guia inteligente azul-escura é exibida temporariamente no centro.
Mantenha pressionada a tecla Option/Alt e arrase para criar uma cópia duplicada do botão para alinhar verticalmente.
Mantenha pressionada a tecla Option/Alt e arrase para criar uma cópia duplicada do botão para alinhar verticalmente.

  1. Mova o botão Duplicar para baixo na página, aproximadamente 460 pixels abaixo do botão original.
  2. Repita as etapas 7 e 8 para duplicar o botão mais duas vezes, para criar um total de quatro botões que são espaçados uniformemente na página. Use a ferramenta Texto para editar o segundo, terceiro e o quarto botão a partir do topo, para atualizar o conteúdo do texto usando esses rótulos: Produtos, Fotos, Fale conosco.
Edite o texto nos quadros de texto para que cada rótulo de botão seja exclusivo.
Edite o texto nos quadros de texto para que cada rótulo de botão seja exclusivo.

Ao duplicar o primeiro botão Início, você copiou o estilo de quadro de texto e seu conteúdo, bem como as configurações de efeitos de rolagem. Se você selecionar um dos botões duplicados e olhar no painel Efeitos de rolagem, verá que as configurações da guia Movimento correspondem às configurações aplicadas ao botão Início, e a posição-chave de cada botão é de 460 pixels abaixo do botão anterior (a mesma distância que o espaço entre cada botão na página).

  1. Calcule a altura total dos quatro botões quando estiverem alinhados em seus locais finais, adicionando altura e espaço. No site de exemplo, os botões têm 116 pixels de altura e há 4 pixels de espaço entre cada botão. Isso significa que a altura total da barra de menus vertical (quando montada) é 476 pixels. Use a ferramenta Retângulo para desenhar um retângulo que representa a largura desejada da seção da página e da mesma altura que a barra de menus. Neste exemplo, o retângulo tem 931 pixels de largura por 476 pixels de altura.
  2. Para replicar o design no site de exemplo, você pode definir a cor de preenchimento do retângulo como um rosa pálido, em uma sombra mais clara do estado Normal dos botões. Você também pode criar vértices arredondados digitando um valor de raio de canto no painel de controle. Neste exemplo, os quatro cantos são definidos como 10 pixels.
Selecione o retângulo e defina o raio do canto para cantos arredondados.
Selecione o retângulo e defina o raio do canto para cantos arredondados.

  1. Use a ferramenta Seleção para alinhar o retângulo de forma que a borda superior seja de aproximadamente 5.094 pixels a partir do topo da página. Verifique também se o lado esquerdo do retângulo está alinhado verticalmente com o lado direito dos botões. No site de exemplo, o retângulo e botões, todos estão a 14 pixels a partir do lado esquerdo da página. É possível visualizar essas configurações ao selecionar um elemento e abrir o painel Transformar. O valor X é a distância do lado esquerdo (14 pixels) e o valor Y é a distância da parte superior da página (5.094 pixels).
  2. Enquanto o retângulo está selecionado, abra o painel Efeitos de rolagem e ative a caixa de seleção Movimento na guia Movimento. Defina a posição-chave para 4.979.
  3. Defina o movimento inicial para se mover à direita a uma velocidade de 1 vez a velocidade da rolagem. Deixe todos os outros campos na guia de movimento definidos como 0.
Aplique efeitos de rolagem para fazer com que o retângulo se mova para a página, deslocando-se do lado esquerdo e avançando à direita, para a posição.
Aplique efeitos de rolagem para fazer com que o retângulo se mova para a página, deslocando-se do lado esquerdo e avançando à direita, para a posição.

  1. Para garantir que o retângulo seja disposto atrás dos quatro botões, escolha Objeto > Enviar para trás quando o retângulo for selecionado.
  2. Escolha Arquivo > Posicionar e navegue para selecionar um arquivo de imagem e clique em uma vez na página para posicioná-lo. Neste exemplo, o PNG com transparência é posicionado para exibir uma imagem de lâmpada acesa. A lâmpada é posicionada na parte superior do retângulo grande, à direita, longe da área que será coberta pelos botões do menu. Neste exemplo, a imagem é posicionada 501 pixels a partir da esquerda (posição X) e 5.245 pixels a partir do topo da página (posição Y).
  3. Para garantir que a imagem inserida seja disposta atrás dos quatro botões, escolha Objeto > Enviar para trás quando a imagem for selecionada. O objetivo é exibir a imagem inserida acima do retângulo grande e dos quatro botões.
  4. Quando a imagem inserida estiver selecionada, abra a guia Movimento do painel Efeitos de rolagem e ative a caixa de seleção Movimento. Defina a posição-chave para o valor desejado. No site de exemplo, é definido como 4.979 pixels.
  5. Na seção Movimento inicial, defina o valor correto para mover a uma velocidade de 0,75 vez a velocidade da rolagem. Defina todos os demais valores de direção como 0.
Defina o Movimento inicial para ir para a direita na mesma velocidade do retângulo.
Defina o Movimento inicial para ir para a direita na mesma velocidade do retângulo.

  1. Use a ferramenta Texto para criar um quadro de texto. No arquivo de exemplo, o quadro de texto tem o seguinte conteúdo: Empilhe quadros de texto vinculados com rolagens de alto contraste para criar menus incomuns. Entretanto, você pode inserir o conteúdo de texto que preferir. Use as opções de formatação no painel de controle para dar o estilo desejado ao texto. Neste exemplo, o quadro de texto não tem uma cor de preenchimento do plano de fundo aplicada.
  2. Use a ferramenta Seleção para posicionar o quadro de texto à direita da imagem colocada. Neste exemplo, o quadro de texto é definido como valor X de 357 pixels (à esquerda) e um valor Y de 5.136 pixels (superior). A localidade real depende do conteúdo do texto e das opções de formatação aplicadas ao quadro de texto.
  3. Quando o quadro de texto for selecionado, use a opção Objeto > Enviar para trás para organizá-lo ou movê-lo para o painel Camadas para que o quadro de texto seja exibido atrás dos quatro botões, mas acima do retângulo grande.
  4. Ative a caixa de seleção Movimento no painel Efeitos de rolagem. Defina a posição-chave arrastando a alça T ou inserindo um valor. No site de exemplo, a posição-chave é definida como 4.979 pixels, o mesmo valor de posição-chave usado pela imagem inserida (gráfico de lâmpada).
  5. Na seção Movimento inicial, defina o quadro de texto para se mover à esquerda a uma velocidade que é a metade (.5) da taxa de rolagem. Defina todos os demais campos como 0.
O quadro de texto é definido para ir para a esquerda (sentido oposto de retângulo e da imagem colocada) em uma velocidade mais baixa.
O quadro de texto está definido para mover para a esquerda em uma velocidade mais baixa.

A seção básica de menu empilhado está agora completa. Entretanto, há mais um elemento de design que você pode adicionar. Isso envolve adicionar vários retângulos girados acima do canto inferior direito do retângulo grande, da mesma forma que o exemplo de Menu deslizante usou os retângulos girados para adicionar um efeito de listra diagonal.

  1. Use a ferramenta Retângulo para desenhar vários retângulos com larguras variáveis. Preencha os retângulos com a mesma cor que a cor de fundo aplicada ao preenchimento do navegador. Assim, os retângulos não ficarão visíveis até que o retângulo grande se mova para a direita atrás deles. Se desejar, você pode agrupar o conjunto de retângulos diagonais para trabalhar com eles como se fossem um só elemento.
Gire uma série de retângulos para que eles criem listras diagonais no canto inferior direito do retângulo maior.
Gire uma série de retângulos para que eles criem listras diagonais no canto inferior direito do retângulo maior.

  1. Se necessário, use o painel Camadas ou escolha Objeto > Enviar para trás para organizar o retângulo maior para aparecer atrás, por trás de todos os outros elementos da página.
  2. Certifique-se de testar periodicamente o andamento clicando na página Visualizar ou exibindo a página no navegador e rolando para baixo para ver o menu empilhado ir para posição. Retorne ao Muse depois de concluir o teste. 

Plano de fundo em movimento

Para criar um efeito de plano de fundo de movimento, você pode criar uma série de grandes retângulos preenchidos com imagens de fundo lado que abrangem o comprimento de uma página longa. Este exemplo usa a guia de rolagem no menu Preenchimento (em vez de guia Movimento do painel Efeitos de rolagem) para aplicar configurações de movimento.

Siga estas etapas para criar um efeito de plano de fundo de movimento semelhante:

  1. Na visualização Design, escolha Página > Propriedades da página. Defina o campo Altura mínima para um valor muito maior. No exemplo do site, a altura mínima de página é definida como 6.254 pixels.

Observação:

Para este exemplo não importa se você define uma cor de preenchimento do navegador, pois ela é coberta por retângulos. Defina a cor de preenchimento de página como Nenhum.

  1. Na parte superior da página, use a ferramenta Retângulo para desenhar um retângulo grande. No site de exemplo, o retângulo é de 1.159 pixels de largura por 1.312 pixels de altura. Use a ferramenta Seleção para centralizar o retângulo na página, com ambos os lados ultrapassando os lados da janela do navegador.
  2. Com o retângulo ainda selecionado, use o menu Preenchimento para definir uma imagem de plano de fundo. Defina o menu Ajuste como Lado a lado para colocar as imagens lado a lado.
Defina uma imagem de plano de fundo ladrilhada como preenchimento do retângulo.
Defina uma imagem de plano de fundo ladrilhada como preenchimento do retângulo.

  1. Se desejar, você pode usar o menu Efeitos para definir um efeito sombra e criar uma borda impressionante em torno do retângulo.
  2. Quando o retângulo preenchido for selecionado, abra a guia de rolagem do menu Preenchimento. Ative a caixa de seleção Movimento e clique e arraste a alça T ou insira um número no campo insira um número no campo para definir a posição-chave. No site de exemplo, a posição-chave é definida como 512 pixels. Entretanto, você pode contrair a alça para alinhá-la com a borda superior do retângulo, se desejar.
  3. Na seção Movimento inicial, defina a direção para mover para baixo e para a esquerda e defina ambas as velocidades a uma taxa de 0,2 vez a velocidade de rolagem. Repita as mesmas configurações na seção Movimento final. 
Defina as opções de movimento na guia de rolagem do menu Preenchimento.
Defina as opções de movimento na guia de rolagem do menu Preenchimento.

  1. Repita as etapas 2-6 para criar outro retângulo preenchido. Posicione o novo retângulo diretamente abaixo do retângulo criado, de forma que nenhuma área de preenchimento do navegador seja exibida e não haja nenhum espaço entre os dois retângulos. Preencha o novo retângulo com um preenchimento de plano de fundo de imagem ladrilhada diferente.
  2. Repita a etapa 7 para criar um terceiro retângulo grande que é posicionado imediatamente abaixo do segundo retângulo. Use o menu de preenchimento para definir uma imagem de plano de fundo ladrilhada. Talvez seja útil diminuir o zoom usando o menu Exibir para exibir todos os retângulos e alinhá-los verticalmente na página.
Diminua o zoom e use a ferramenta Seleção para posicionar os três grandes retângulos verticalmente.
Diminua o zoom e use a ferramenta Seleção para posicionar os três grandes retângulos verticalmente.

Observação:

No site de exemplo, o terceiro retângulo é maior do que os dois primeiros. Você pode arrastar as alças para expandir a altura do terceiro retângulo duplicado ou criar um quarto retângulo para preencher a área restante na parte inferior.  

  1. Com o segundo retângulo selecionado, abra a guia de rolagem do menu Preenchimento. Atualize a seção Movimento inicial para mover o retângulo para a direita a uma velocidade de 0,3 vez a velocidade da rolagem. Na seção Movimento final, aplique as mesmas configurações para mover o retângulo para a direita a uma velocidade de 0,3 vez a velocidade da rolagem. Deixe ambos os campos de direção vertical definidos como 0.
Defina as configurações de movimento inicial e final para mover o segundo retângulo para a direita.
Defina as configurações de movimento inicial e final para mover o segundo retângulo para a direita.

  1. Selecione o terceiro retângulo e atualize as configurações da guia de rolagem do menu Preenchimento. Defina a seção Movimento inicial para se mover para cima a uma velocidade de 0,25 vez a velocidade da rolagem e para a esquerda a uma velocidade de 0,6 a taxa da rolagem. Aplique as mesmas configurações na seção Movimento final para o terceiro retângulo.
  2. Para testar a página, escolha Arquivo > Visualizar página no navegador. Role a página para ver cada um dos retângulos ladrilhados parecerem se mover diagonalmente até que você role para baixo, para a parte inferior da página. Conforme você rola, os retângulos também se movem.
  3. Feche o navegador e retorne à área de trabalho do Muse.

Máscaras

Neste exemplo, um gráfico de barras parece se animar no local. Um gráfico de seta rosa se estende para cima, formando-se acima e atrás de barras no gráfico. Embora as barras no gráfico pareçam aumentar na parte inferior do gráfico, são de fato retângulos coloridos sólidos, com efeitos de rolagem de movimento aplicados, que aparecem de trás dos retângulos brancos maiores (preenchidos com a mesma cor branca sólida que a cor de fundo da página).

Este exemplo usa várias técnicas com efeitos de rolagem. Os elementos são organizados na frente ou atrás do outro usando o painel Camadas. Retângulos branco são desenhados na parte superior dos elementos gráficos. Quando os retângulos brancos estão cobrindo o gráfico de barras, barras e a seta ficam ocultas - embora estejam mascaradas. Os retângulos brancos e a tabela de gráficos usam as configurações 0 em efeitos de rolagem de movimento para permanecerem no lugar enquanto a página rola. As barras e o gráfico de seta rosa que estão dispostos em camadas abaixo têm efeitos de rolagem de movimento aplicados que fazem com que se movam para cima e para a exibição, enquanto o gráfico de barras é montado.

Siga estas etapas para criar um efeito semelhante a máscara:

  1. Na visualização Design, escolha Página > Propriedades da página. Defina o campo Altura mínima para um valor muito maior. No exemplo do site, a altura mínima da página é definida como 6.076 pixels.
  2. Defina a Página e o Preenchimento do navegador com um branco sólido (ou qualquer cor que você preferir - mas use essa mesma cor para preencher os retângulos de máscara posteriormente).
  3. Use a ferramenta Retângulo para desenhar um retângulo grande na página. O retângulo no site de exemplo é de 804 pixels de largura por 489 pixels de altura.
  4. Defina a cor de preenchimento do retângulo como Nenhum. Defina a cor do traçado. No menu Traçado, defina os lados esquerdo e inferior do retângulo para exibir um traçado com espessura de 20, enquanto os lados superior e direito são definidos como 0 para ocultar o traçado. Isso cria a base do gráfico de barras.
     
Use o menu Traçado para definir um traçado nos lados esquerdo e inferior do retângulo.
Use o menu Traçado para definir um traçado nos lados esquerdo e inferior do retângulo.

  1. Com o retângulo selecionado, abra a guia Movimento do painel Efeitos de rolagem. Defina a posição-chave e insira 0 em todos os quatro campos. Essa configuração significa que o retângulo não se moverá antes ou depois que a posição-chave é atingida, para que o elemento permaneça no local.
Digite 0 para todos os campos para "fixar" o retângulo na página.
Digite 0 para todos os campos para "fixar" o retângulo na página.

  1. Use a ferramenta Retângulo para desenhar dois retângulos maiores. Desenhe o primeiro retângulo para alinhar com o lado esquerdo do gráfico. No site de exemplo, o retângulo é de 657 pixels de largura por 1.810 de altura.
  2. Desenho do segundo retângulo abaixo do gráfico, para alinhar com a borda inferior. No site de exemplo, o retângulo é de 1002 pixels de largura por 1541 de altura.
  3. Defina a cor de preenchimento dos retângulos como branca (ou a mesma cor de preenchimento do navegador) e o traçado como 0. Use a ferramenta Seleção para alinhar os retângulos com dois lados do gráfico.
Posicione os dois retângulos maiores à esquerda e abaixo de exibição de gráfico.
Posicione os dois retângulos maiores à esquerda e abaixo de exibição de gráfico.

  1. Com os retângulos selecionados, clique com o botão direito do mouse e escolha Objeto > Agrupar para agrupar os dois retângulos.
  2. Com o grupo de retângulos selecionado, abra a guia Movimento do painel Efeitos de rolagem. Defina a posição-chave (no exemplo é de 1.516 pixels) e digite 0 em todos os quatro campos. Essa configuração significa que o grupo de retângulos brancos não se moverá antes nem depois que a posição-chave é alcançada. O grupo permanece no lugar da mesma forma que a tabela externa do gráfico.
  3. Use o painel Camadas para ocultar ou bloquear temporariamente o grupo.
  4. Role até a área abaixo do grupo e use a ferramenta Retângulo para desenhar um total de cinco retângulos com a mesma largura. No site de exemplo, todas as barras têm 74 pixels de largura e alturas variáveis. Da esquerda para a direita, as alturas dos cinco retângulos no exemplo são 141, 188, 292, 444, e 583. Todos os retângulos são preenchidos com a mesma cor verde do traçado que define a borda esquerda e inferior do gráfico.
Avance os cinco retângulos na página.
Avance os cinco retângulos na página.

  1. O local de retângulos (da esquerda para direita) é listado abaixo, pelos valores X e Y:
    • X: 200 Y: 2.622
    • X: 330 Y: 2797 
    • X: 460 Y: 3081 
    • X: 590 Y: 3304 
    • X: 721 Y: 3.499
  2. Em seguida, selecione cada um dos retângulos, começando pelo retângulo esquerdo e trabalhando à direita. Selecione cada um, ative a caixa de seleção Movimento na guia Movimento do painel Efeitos de rolagem e defina as seguintes posições-chave:
    • 2.099
    • 2321
    • 2709
    • 3084
    • 3441
  3. Com todos os retângulos selecionados, atualize as configurações no painel Efeitos de rolagem, de modo que a seção Movimento inicial se mova para cima a uma velocidade de 1 vez a velocidade da rolagem. Defina todos os demais campos como 0.
     
Ajuste os valores de movimento para os cinco retângulos de uma só vez no painel Efeitos de rolagem.
Ajuste os valores de movimento para os cinco retângulos de uma só vez no painel Efeitos de rolagem.

  1. Coloque um arquivo PNG com transparência na página. No site de exemplo, o arquivo PNG é um gráfico de uma seta rosa que ziguezagueia para cima. O PNG usado neste exemplo é de 695 pixels de largura por 443 pixels de altura. Após inserido na página, mova-o para o local X: 78 e Y: 3.427.
  2. No painel Camadas, posicione o arquivo PNG abaixo do primeiro e terceiro retângulos de barra (a partir da esquerda) mas acima da segunda, quarta, e quinta barras.
Use o painel Camadas para posicionar a imagem da seta PNG para que ela pareça se formar entre as barras no gráfico.
Use o painel Camadas para posicionar a imagem da seta PNG para que ela pareça se formar entre as barras no gráfico.

  1. Com a imagem da seta selecionada, abra a guia Movimento do painel Efeitos de rolagem e ative a caixa de seleção Movimento. Defina a posição-chave (no exemplo, é de 3.238 pixels). Na seção Movimento inicial, defina as direções para cima e para a direita, e insira 0,25 vez a velocidade de rolagem nos campos Movimento inicial. Defina ambos os campos na seção Movimento final como 0.
Atualize as configurações de movimento no painel Efeitos de rolagem.
Atualize as configurações de movimento no painel Efeitos de rolagem.

  1. No painel Camadas, mostre e desbloqueie o grupo de dois retângulos brancos que você ocultou e bloqueou anteriormente. Mova o grupo acima dos outros elementos, para que seja exibido na parte superior de outro conteúdo na página. Como o grupo está na parte superior, atuará como uma máscara para mostrar apenas as barras e os gráficos de seta ao se moverem para cima dentro do quadro do gráfico.
  2. Para testar a página, escolha Arquivo > Visualizar página no navegador. Role a página para exibir o gráfico de barras se mover para a posição, enquanto os dois retângulos brancos que estão mascarando as barras ocultam os elementos do gráfico de barras enquanto eles estão dentro do gráfico.
  3. Feche o navegador e retorne à área de trabalho do Muse.

Exemplos de designs de site usando efeitos de rolagem

Confira o site Demential Lab para ver todos os recursos de efeitos de rolagem em ação.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online