Saiba como adicionar efeitos de rolagem ao preenchimento do navegador e de plano de fundo de um site usando o Adobe Muse.
Aplicar efeitos de rolagem a imagens definidas como Preenchimento do navegador
Efeitos de rolagem permitem controlar a velocidade de imagens de preenchimento do plano de fundo do navegador, bem elementos de página ladrilhados e não ladrilhados. Efeitos de rolagem podem ser aplicados ao preenchimento do navegador que usa imagens de plano de fundo ladrilhadas, ajustadas às dimensões, dimensionadas para preencher ou ajustadas ao tamanho original. O preenchimento do navegador move-se direcionalmente conforme a rolagem da página, com base nas direções e velocidade definidas na seção de Rolagem no menu Preenchimento do navegador.
As opções de rolagem são esmaecidas e não estão disponíveis até você adicionar uma imagem ao plano de fundo de preenchimento do navegador usando o menu Preenchimento do navegador. Não é possível aplicar efeitos de rolagem a um preenchimento do navegador que só está preenchido com uma cor sólida ou gradiente.
Como adicionar Efeitos de rolagem para Preenchimento do navegador?
Para configurar os efeitos de movimento de rolagem para preenchimentos do navegador, siga estas etapas:
- Na exibição Design, escolha Página > Propriedades da página. Na guia Layout, defina o campo Altura mínima para 2000 pixels. Isso garante que a página é longa o suficiente para navegar. Clique em OK para salvar as alterações e feche a caixa de diálogo Propriedades da página.
- Clique no link Preenchimento do navegador no painel de controle. Na guia Preenchimento, clique no ícone de pasta próximo à seção Imagem para escolher um arquivo de imagem na sua área de trabalho. Selecione a opção desejada no menu Ajuste e ative a opção de Rolagem.
- Clique na guia Rolagem. Ative a caixa de seleção Movimento de rolagem.
Revise a seção de rolagem do menu Preenchimento do navegador. O campo na seção central (que está exibindo 0 px) corresponde à posição-chave (o local da alça T) que controla o movimento. A configuração padrão de 0 px significa que a alça T é definida como a margem superior da janela do navegador.
O número de pixels especificado no campo de posição-chave significa que as alterações definidas na seção Movimento inicial se moverão (nessa direção e nessa velocidade) quando a página for rolada para esse local. A parte superior da página inicia em 0 e o número de pixels aumenta quanto mais você rola para baixo na página. (No painel de controle e no painel Transformar, a distância do topo da página é referida como valor Y).
Os valores inseridos na seção Movimento final são aplicados depois que a página é rolada após a posição-chave (local da alça T).
O elemento com o efeito de rolagem de movimento aplicado (neste caso, a imagem ladrilhada definida como preenchimento do navegador) continuará nas direções que tenham um valor superior a 0 no campo. Se as direções horizontal e vertical tiverem um valor definido como 0, o elemento será essencialmente fixado na página e não se moverá.
Na seção Movimento inicial, você observará que os valores nos campos têm uma letra minúscula "x" ao lado delas. Isso representa vezes. Na imagem de Preenchimento do navegador, a seção de movimento inicial indica que o preenchimento do navegador se moverá na direção ascendente, a 1 vez (a mesma velocidade) da velocidade da rolagem. Se o visitante rolar a página mais rapidamente, o movimento do efeito de rolagem aumentará a velocidade de modo a corresponder ao mesmo ritmo.
Na seção horizontal (à esquerda e direita), o campo exibe "0", o que significa que o preenchimento do navegador não moverá à esquerda ou direita.
A seção Movimento final contém uma interface semelhante. Na imagem de Preenchimento do navegador, o preenchimento do navegador é definido para mover para cima 1 vez a velocidade do movimento e não se moverá horizontalmente.
Passe o mouse sobre o botão Informações (ícone i) no canto superior da parte inferior esquerda da guia de rolagem para saber como os efeitos de rolagem são aplicados a um preenchimento do navegador.
- Clique nos botões de seta em Movimento inicial para especificar a direção vertical (para cima ou para baixo) e/ou a direção horizontal (esquerda ou direita) para controlar a direção do movimento de preenchimento do navegador.
- Na seção Movimento Inicial, insira valores numéricos ou clique nos botões de seta para cima e para baixo para definir as velocidades de rolagem horizontal e vertical. Essas configurações são descritas com mais detalhes a seguir. Se um campo de velocidade for definido como 0, significa que o elemento não se moverá nessa direção durante a rolagem (antes que a posição-chave seja alcançada).
- Atualize os valores na seção Movimento final, defina as direções desejadas e digite os valores numéricos nos campos correspondentes para definir a taxa na qual os efeitos de rolagem ocorrerão.
- Para fechar o menu Preenchimento do navegador, clique em qualquer outro lugar na página.
- Escolha Arquivo > Visualizar página no navegador para carregar a página em uma nova janela do navegador. Role a página para ver a ocorrência dos efeitos effectsscroll do movimento de rolagem.
- Quando terminar o teste, saia do navegador e retorne ao Muse.
Aplicar movimento de rolagem a um preenchimento de fundo de elemento de página
Como adicionar Efeitos de rolagem para Preenchimento do plano de fundo?
O movimento de rolagem pode ser aplicado a objetos na página que têm imagens de plano de fundo ladrilhadas ou não ladrilhadas aplicadas como preenchimento. Siga estas etapas:
- Ao editar uma página na visualização Design, escolha Página > Propriedades da página. Defina altura mínima bem mais alta, como 2.000 pixels, para garantir que a página seja longa o bastante para rolagem. Clique em OK para salvar as alterações e feche a caixa de diálogo Propriedades da página. Se preferir, adicione suficiente conteúdo de página para criar uma página mais longa.
- Na visualização Design, selecione a ferramenta Retângulo no painel de Controle.
- Desenhe um retângulo na página.
- Use o menu Preenchimento para definir uma imagem de plano de fundo ladrilhada ou não para preencher o retângulo.
- Clique na guia Rolagemno menu Preenchimentoe defina as opções de rolagem.
- Clique na guia Rolagem no menu Preenchimento. Ative a caixa de seleção Movimento e comece a definir as opções de rolagem.
Observe a alça T que aparece acima do elemento ativado para o movimento de rolagem. A alça é uma representação visual da posição-chave (definida atualmente como 100 px acima do elemento). O ícone na seção central da guia de Rolagem corresponde ao local da alça T na página. Você pode redefinir as posições específicas da chave para quando os efeitos de rolagem ocorrerem inserindo um novo campo central ou arrastando a alça T na página. Conforme você arrasta a alça T, a área acima de posição-chave fica desativada temporariamente.
A alça T não precisa se estender para cima em relação ao elemento selecionado. Você pode clicar e arrastar a alça T para que ela fique alinhada com a borda superior de um elemento, ou arrastar a alça T para que ela se estenda abaixo de um elemento.
O Muse oferece flexibilidade completa durante o processo de design, porque você pode escolher arrastar as alças ou inserir números no campo de posição-chave para controlar precisamente o movimento que ocorre quando um visitante rola a página.
A guia Rolagem no menu Preenchimento funciona da mesma forma que a guia Rolagem no menu Preenchimento do navegador:
- Quando um elemento ativado para efeitos de rolagem de movimento é selecionado, use a guia de rolagem do menu Preenchimento para definir numericamente a posição-chave, ou clique e arraste a alça T na página para definir a posição-chave.
- Defina as direções horizontal e vertical e a taxa de velocidade correspondente em relação à velocidade de rolagem da página na seção Movimento inicial. Isso define o movimento que ocorrerá antes que a página seja rolada para a posição-chave.
- Defina as direções horizontal e vertical e a velocidade correspondente em relação à velocidade de rolagem da página na seção Movimento final. Isso define um movimento que ocorrerá depois que a página é rolada após a posição-chave.
Na imagem com as propriedades de Rolagem, o retângulo é definido para se mover à direita, 3 vezes a velocidade de rolagem do visitante, e chega à sua posição no design quando a página em um navegador encontra a posição-chave. Quando o visitante rola após a posição-chave (100 pixels) o retângulo começa a se mover para a esquerda, fora de posição, a 3 vezes a velocidade de rolagem do visitante. Neste exemplo, o retângulo não se move verticalmente porque os dois campos verticais estão definidos como 0.
- Para fechar o menu Preenchimento, clique em qualquer lugar na página.
- Pressione Visualizar, ou escolha Arquivo > Visualizar página no navegador para testar os efeitos de rolagem após aplicar esses objetos. Role a página para ver a movimentação dos elementos.
- Retorne ao Muse ou clique no botão Design ao concluir o teste, para continuar a editar a página.
Fazer logon em sua conta