Saiba como aplicar efeitos de rolagem de movimento e de opacidade para os elementos de página no Adobe Muse.

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.

Aplicar efeitos de rolagem a elementos de página

O painel Efeitos de rolagem contém quatro guias diferentes para controlar movimento, opacidade, widgets de slides e o conteúdo do Adobe Edge Animate com base em como uma página é rolada. Quando os efeitos de rolagem são aplicados conjuntamente, e quando alguns elementos também são fixados, definidos a uma largura de 100% e/ou organizados acima e atrás um do outro usando o painel Camadas, é possível criar diversos efeitos interessantes.

Aplicar efeitos de rolagem de movimento usando o painel Efeitos de rolagem

A interface do painel Efeitos de rolagem é semelhante à do painel efeitos de rolagem para Preenchimento do navegador e Preenchimento do plano de fundo. Siga estas etapas para aplicar efeitos de rolagem a um elemento de página usando a guia Movimento do painel Efeitos de rolagem:

  1. No Muse, alterne para a visualização Design e selecione Página > Propriedades da página.
  2. Defina o valor de Altura mínima até um mínimo de 2000 pixels para garantir que a página é longa o suficiente para navegar por ela.
  3. Clique em OK para salvar as alterações e feche a caixa de diálogo Propriedades da página.
  4. No modo de exibição Design, desenhe um retângulo, ou um quadro de texto na página.
  5. Use a guia Preenchimento no menu Preenchimento para adicionar uma imagem de plano de fundo ladrilhada ou não. Ou basta selecionar uma cor de preenchimento de cor sólida ou gradiente.
  6. Selecione Janela > Efeitos de rolagem para abrir o painel Efeitos de rolagem.
Abra o painel Efeitos de rolagem para acessar as configurações de efeito de rolagem.
Abra o painel Efeitos de rolagem para acessar as configurações de efeito de rolagem.

  1. Ativar efeitos de rolagem: no painel Efeitos de rolagem, a guia Movimento (lado esquerdo) é exibida. Com o elemento na página selecionado, marque a caixa de seleção Movimento.

    DICA: observe que ao ativar a caixa de seleção Movimento uma alça em forma de T é adicionada ao elemento que se estende fora da borda superior. A alça em forma de T indica a posição-chave aplicada a partir do Efeito de rolagem aplicado ao elemento. O Efeito de rolagem funcionará quando um visitante alcançar a posição-chave ao navegar.

    Por padrão, o controle da alça em forma de T será exibido acima do elemento. Entretanto, você pode clicar e arrastar a alça para estendê-la para cima, arrastá-la para baixo para alinhar com a borda superior do elemento que está controlando ou arrastar a alça para baixo do elemento.

  2. Posicionar a alça em forma de T para definir a posição-chave: arraste a alça em forma de T para definir a posição-chave. Isso permite configurar o movimento que ocorrerá antes e depois que a página a ser navegada alcançar o topo da alça em forma de T.

    Como alternativa, você pode digitar um valor numérico no campo de posição-chave no centro do painel Efeitos de rolagem enquanto a guia Movimento está ativa. Na imagem acima, a posição-chave é definida como 200 pixels. 

    A localização da alça T representa a posição-chave do elemento. Quando a página é rolada verticalmente, as configurações da seção Movimento inicial são aplicadas de forma que a posição do elemento corresponda à sua localização, como mostrado na exibição Design.

    Quando o visitante rola a página ou clica em um link de ancoragem para ignorar a posição-chave do elemento, as configurações da seção Movimento final são aplicadas.

    A seção Movimento inicial contém um conjunto de setas de direção vertical e horizontal e opções de velocidade.

  3. Configurar a direção vertical do Movimento inicial: escolha uma direção vertical (para cima ou para baixo) clicando em um dos botões verticais. Insira um valor de velocidade no campo ao lado das setas de direção vertical para definir a velocidade em que o movimento ocorrerá em relação à velocidade de rolagem da página. Se você digitar 0, o elemento não se moverá verticalmente. Você também pode especificar uma porcentagem usando o separador decimal. Por exemplo, se você digitar 0,5, o elemento se movimentará verticalmente à metade da velocidade, comparado à taxa de rolagem da página.

  4. Configurar a direção horizontal do Movimento inicial: defina a direção horizontal de rolagem do elemento (esquerda ou direita) clicando na seta para a esquerda ou direita para definir a direção de movimento do elemento antes de chegar à posição-chave. No campo à direita das setas horizontais, defina o valor de velocidade para a direção horizontal. Se não quiser que o elemento se mova na direção horizontal, defina o campo de velocidade horizontal inicial como 0.

  5. Repita as etapas 7 e 8 para definir a direção e as velocidades de movimento para a seção Movimento final.

No exemplo a seguir, a posição-chave é definida como 500 pixels. Quando o navegador inicia a rolagem, o elemento move-se para baixo e para a posição a uma velocidade de 1 vez a velocidade de rolagem da página. O elemento chega à posição à medida que a página rola para a posição-chave. Quando a rolagem da página ultrapassa a posição-chave, o elemento move-se para a direita, a uma velocidade de 2 vezes a rolagem da página.

Aplique as Configurações de movimento para ajustar o efeito de rolagem no Adobe Muse
Aplique as Configurações de movimento para definir o efeito de rolagem

  1. Pressione Visualizar ou escolha Arquivo > Visualizar página no navegador para testar os efeitos de rolagem. Role a página para baixo e recue-a novamente para exibir o movimento do elemento.
  2. Retorne ao Muse ou clique no botão Design ao concluir o teste, para continuar a editar a página.

Aplicar efeitos de rolagem de opacidade usando o painel Efeitos de rolagem

Nesta seção, você verá como aplicar transformações à visibilidade que altera a exibição de um elemento com base nas interações de rolagem do visitante. Essa é uma maneira útil de mostrar e ocultar conteúdo, dando a ilusão de que os itens aparecem e desaparecem gradualmente, conforme o visitante rola para baixo para uma nova seção da página. Siga estas etapas para aplicar efeitos de rolagem que afetam a transparência de um elemento de página usando a guia Opacidade do painel Efeitos de rolagem:

  1. Ao editar uma página na visualização Design, verifique se as propriedades da página têm um valor de pixel no campo Altura mínima, que é mais alto do que a altura média da maioria dos monitores, como 2.000 pixels. Como alternativa, você pode adicionar conteúdo de página à página para garantir que ela seja longa o suficiente para rolagem.
  2. No modo de exibição Design, desenhe um retângulo, ou um quadro de texto na página.
  3. Use a guia Preenchimento do menu Preenchimento (ou use o painel Preenchimento) para adicionar uma imagem de plano de fundo ladrilhada ou não ao elemento de página selecionado, ou defina uma cor de preenchimento de cor sólida ou gradiente. (Se preferir, adicione o widget de Apresentação de slides ou insira um arquivo OAM do Adobe Edge Animate ).
  4. Enquanto o elemento é selecionado, clique na guia Opacidade (segunda guia a partir da esquerda) no painel Efeitos de rolagem e ative a caixa de seleção Opacidade.
Marque a caixa de seleção Opacidade para ativar os efeitos de rolagem para o elemento selecionado.
Marque a caixa de seleção Opacidade para ativar os efeitos de rolagem para o elemento selecionado.

Ativar a opção Opacidade faz com que um tipo diferente de alça apareça no elemento. Assim como a alça T usada para definir a posição-chave na guia Movimento, clique e arraste a alça para aparecer acima do elemento, arraste-a para baixo de modo que corresponda à borda superior (ou acima de qualquer parte do elemento), ou arraste-a para abaixo do elemento. A alça Opacidade tem três partes diferentes que podem ser arrastadas independentemente para definir os valores Posição-chave, Posição de atenuação 1 e Posição de atenuação 2.

  1. Clique e arraste a parte quadrada média da alça para definir a posição-chave. No exemplo abaixo, a posição-chave é definida como 150 pixels.
Defina a posição-chave arrastando a alça quadrada média verticalmente.
Defina a posição-chave arrastando a alça quadrada média verticalmente.

  1. Clique e arraste a parte circular superior da alça para posicioná-la no local desejado. No exemplo abaixo, a posição Esmaecer 1 é definida como 100 pixels.
Definia a Posição de esmaecimento 1 da alça Opacidade
Clique e arraste a parte superior esquerda da alça arredondada para definir a primeira posição que afetará a transparência do elemento.

  1. Clique e arraste a parte circular inferior da alça para posicioná-la no local desejado. No exemplo abaixo, a posição Esmaecer 2 é definida como 200 pixels.
Definia a Posição de esmaecimento 2 da alça Opacidade
Clique e arraste a parte superior direita da alça arredondada para definir a segunda posição que afetará a transparência do elemento.

Observação:

Se desejado, a posição-chave pode ser arrastada ao longo das alças da posição de atenuação para ser definida com o mesmo valor. Em vez de arrastar alças, você também pode digitar valores numéricos para cada um desses campos no painel Efeitos de rolagem.

Neste exemplo, o elemento começa completamente transparente e fica mais opaco, até que esteja completamente opaco (o valor de opacidade correspondente à posição-chave está atualmente definido como 100%) quando a página chega à posição-chave. Quando as rolagens de página ultrapassam a posição-chave, o elemento torna-se gradualmente mais transparente, para desaparecer gradualmente novamente quando a página é rolada a mais de 200 pixels.

Defina a porcentagem de opacidade para efeitos de rolagem
Defina a porcentagem de opacidade (onde 0% é completamente transparente) na guia Opacidade do painel Efeitos de rolagem.

  1. Pressione Visualizar ou escolha Arquivo > Visualizar página no navegador para testar os efeitos de rolagem. Role a página para baixo e recue-a novamente para visualizar a alteração na opacidade do elemento em relação à rolagem da página.
  2. Retorne ao Muse ou clique no botão Design ao concluir o teste para continuar a editar a página.

Trabalhar com a guia Apresentação de slides do painel Efeitos de rolagem

Outro uso comum do movimento de rolagem é combinar a interação da rolagem com a exibição de imagens em uma apresentação de slides. Você pode adicionar um widget de Apresentação de slides à página e usar a guia Apresentação de slides do painel Efeitos de rolagem para aplicar efeitos de rolagem, como a exibição de uma nova imagem na apresentação de slides automaticamente, sempre que a página é rolada para um local específico.

Clique na guia Apresentação de slides (terceira guia a partir da esquerda) e revise as configurações desta seção.

O uso mais comum para essa parte da interface de movimento de rolagem é fixar um widget de Apresentação de slides na página. Geralmente, o widget de Apresentação de slides é configurado (usando o menu Opções) para exibir somente o contêiner maior da apresentação de slides, e ocultar as miniaturas e os botões Próximo e Anterior.

Uma apresentação de slides de tela inteira é especialmente adequada para esse efeito, embora o tipo de widget de Apresentação de slides que você escolhe adicionar dependa do design do site.

Siga estas etapas para aplicar efeitos de rolagem a um widget de Apresentação de slides:

  1. Atualize o campo de altura mínima na caixa de diálogo Propriedades da página para tornar a página alta o suficiente para rolagem. Se preferir, adicione o conteúdo para criar uma página mais longa.
  2. Arraste um widget de Apresentação de slides da Biblioteca de widgets para a página. Use o menu Opções para configurar as opções de apresentação de slides. (Se você aplicar efeitos de rolagem aos widgets da Apresentação de slides, as opções Próximo, Anterior e Miniaturas geralmente ficarão desativadas).
  3. Adicione imagens ao widget de Apresentação de slides clicando na pasta ao lado da seção Imagens do menu Opções. Navegue para selecionar as imagens que deseja adicionar em seu computador para preencher a galeria de imagens.
  4. Use a interface de Fixação no painel de Controle para fixar a apresentação de slides em sua posição atual na janela do navegador. Quando a apresentação de slides é selecionada, clique em uma das seis posições de fixação.
Aplique efeitos de rolagem aos widgets de Apresentação de slides
Fixe o widget da apresentação de slides a um local específico de modo a permanecer na posição na janela do navegador enquanto a página é rolada.

Depois de adicionar e configurar a apresentação de slides fixada, você pode adicionar efeitos de rolagem.

Na guia Apresentação de slides do painel Efeitos de rolagem, ative a caixa de seleção Apresentação de slides de slides enquanto o widget da Apresentação de slides é selecionado.

Ative a opção Apresentação de slides no painel Efeitos de rolagem.
Selecione o widget de Apresentação de slides e ative a opção Apresentação de slides no painel Efeitos de rolagem.

Observe que assim que a opção Apresentação de slides é ativada, a alça da posição-chave é adicionada à apresentação de slides na visualização Design. Para atualizar os valores de posição de rolagem da chave, você pode arrastar o lado esquerdo e direito da alça ou digitar números no campo Posição de rolagem da chave. Você também pode clicar nas setas para cima e para baixo para aumentar o painel Efeitos de rolagem ou diminuir o valor numérico.

A guia Apresentação de slides do painel Efeitos de rolagem, sua interface contém dois botões: 1 e 2 têm duas formas diferentes de controlar a reprodução das imagens das apresentações em slides. Você pode definir a apresentação de slides para reprodução automática ou configurá-la para avançar incrementalmente pelas imagens, com base na rolagem da página.

A primeira forma é definir a posição-chave desejada e ativar a caixa de seleção Reprodução automática.

Quando a rolagem da página ultrapassa a posição-chave (ou quando o visitante clica em um link para uma marca de ancoragem e vai para baixo na página além da posição-chave) a apresentação de slides é reproduzida. O recurso de reprodução automática continuará exibindo as imagens fazendo repetições no conjunto até que a rolagem da página seja revertida para acima da posição-chave o visitante saia da página.

No exemplo mostrado na imagem acima, a apresentação de slides inicia a reprodução quando a página rola até pixels (ou em qualquer lugar abaixo da configuração da de posição-chave). Se o usuário fizer rolagem reversa, a apresentação de slides irá parar quando a rolagem da página passar a posição-chave (99 pixels ou menos).

A segunda maneira de controlar o widget da apresentação de slides é definir a posição-chave e ativar o botão Alternar slides a cada. Neste fluxo de trabalho, você também define o número de pixels no campo abaixo do botão de opção, para exibir a frequência de avanço das imagens na apresentação de slides, com base em até que ponto a página é rolada.

Por exemplo, você pode fixar um widget de apresentação de slides em uma página mais longa, para que ela permaneça em um local fixo enquanto o conteúdo da página é rolado. Ao definir um valor numérico para a opção Alternar slides a cada, você pode configurar a apresentação de slides para alternar para a próxima imagem no conjunto cada vez que a página rolar para baixo, para o número especificado de pixels.

Na imagem acima, a posição-chave é definida como 200. Quando a rolagem da página ultrapassa 200 pixels a partir do topo, a próxima imagem na série é exibida na apresentação de slides sempre que a página é rolada outros 30 pixels.

Defina os efeitos de rolagem para Apresentações de slides no Adobe Muse
Defina a apresentação de slides para avançar para a próxima imagem sempre que a página for rolada para baixo uma distância específica (em pixels).

Trabalhar com a guia Adobe Edge Animate do painel Efeitos de rolagem

O Adobe Edge Animate é uma ferramenta de design intuitiva que permite criar animações web baseadas em HTML5. Usando a interface do Edge Animate, você pode criar composições com gráficos e símbolos de movimento em repetição. As animações criadas usando o Adobe Edge Animate podem ser exportadas como arquivos OAM e colocados nas páginas dos sites de Muse. As animações criadas no Edge Animate são reproduzidas em um navegador sem exigir plug-in.

Ao criar animações no Adobe Edge Animate, você arrasta os elementos para a fase e manipula seu movimento usando uma linha do tempo. Além de adicionar elementos diretamente à linha do tempo principal, você também pode criar elementos aninhados com os subelementos que serão reproduzidos usando suas próprias linhas do tempo. Para saber mais sobre como trabalhar com o Adobe Edge Animate, consulte a página Adobe Edge Animate do produto. Assista também aos tutoriais em vídeo do Adobe Edge Animate na TV Adobe.

Para trabalhar com o recurso de movimento de rolagem do Adobe Edge Animate, a primeira etapa envolve o design de uma composição especificamente para essa finalidade. Efeitos de rolagem podem ser aplicados aos arquivos OAM para afetar as animações inseridas na Linha do tempo principal. Ao projetar estrategicamente a animação de modo que apenas os itens que você deseja mover quando a página rola estejam na linha do tempo principal (e colocando todo o resto em linhas do tempo de símbolos aninhados), você pode criar animações interativas. Enquanto os visitantes rolam a página, as configurações de efeito de rolagem só controlam a reprodução de elementos animados na linha do tempo principal.

Para obter informações sobre como criar animações especificamente para adicionar em um site do Adobe Muse, consulte Adicionar conteúdo do Adobe Edge Animate.

Siga estas etapas para trabalhar com a guia Apresentação de slides no painel Efeitos de rolagem:

  1. Exporte o arquivo OAM do Adobe Edge Animate e salve-o em sua pasta do site.
  2. Inicie o Muse e clique duas vezes em uma página para abri-la na exibição de Design. Verifique se a página é suficientemente longa para rolagem, atualizando as configurações de altura mínima na caixa de diálogo Propriedades da página ou adicionando o conteúdo da página para criar uma página mais longa.
  3. Escolha Arquivo >Posicionar e navegue para selecionar o arquivo OAM da pasta do site.
  4. Abra o painel Efeitos de rolagem. Clique na guia Adobe Edge Animate (quarta guia a partir da esquerda) e revise as configurações desta seção.
  5. Quando o arquivo OAM for selecionado, ative a caixa de seleção Edge Animate.
Definir efeitos de rolagem para animações no Adobe Muse
Defina a animação Edge Animate para iniciar a reprodução quando a página rolar para um local específico ou defina-a para alternar os quadros toda vez que a página rolar para baixo, para uma distância específica (em pixels).

Na imagem acima, a posição-chave é definida como 50 pixels. Você pode arrastar a alça T ou digitar um valor diferente no campo de posição-chave para ajustá-la.

Depois de definir a posição-chave, você pode controlar a reprodução da animação usando duas opções:

  • Reprodução automática: Quando essa opção é selecionada, a animação na linha do tempo principal é iniciada assim que o navegador é rolado para a posição-chave, independentemente do número de quadros na linha do tempo principal. A animação continua a ser reproduzida até que a rolagem da página ultrapasse a posição-chave.
  • Alternar quadros a cada: Quando essa opção é selecionada, a animação da linha do tempo principal avançará 1 quadro sempre que a página for rolada após um número específico de pixels. Por exemplo, se você criar uma página com 3.000 pixels de altura e inserir o número 10, a animação da linha do tempo principal será reproduzida na taxa de 1 quadro a cada 10 pixels cada vez que a página for rolada. Se o visitante rolar a página para baixo rapidamente, a velocidade da animação aumentará.

Observação:

Nenhum objeto animado que esteja aninhado ou vinculado à linha do tempo principal na composição do Adobe Edge Animate será afetado pelas configurações de efeito de movimento da rolagem. Consequentemente, você pode escolher um plano de fundo estático ou mais elementos aninhados de repetição contínua que estão se movendo consistentemente, independentemente da interação do usuário com a página de rolagem.

  1. Após escolher as configurações na guia Edge Animate do painel Efeitos de rolagem, escolha Arquivo > Visualizar página no navegador (ou clique no botão Visualizar). Teste a página rolando para cima e para baixo para exibir a reprodução do conteúdo de animação do Edge Animate (que foi adicionado à linha do tempo principal).
  2. Se for necessário fazer quaisquer alterações, retorne ao Muse (ou clique no botão Design) e atualize as configurações do painel Efeitos de rolagem.

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