As animações acionadas pelo scroll podem ser um fator de mudança para o seu sítio Web, melhorando a sua interatividade e tornando o conteúdo mais envolvente. À medida que os utilizadores se deslocam para baixo, as animações dão profundidade à sua página, chamando a atenção e tornando a experiência de navegação mais envolvente. Se estiver a utilizar Elementor ProSe quiser adicionar estas animações, é muito simples. Aqui está um guia para o ajudar a começar e a tirar o máximo partido destes efeitos, incluindo animações de paralaxe para um design com mais camadas.
Porquê utilizar animações acionadas pelo scroll?
Estas animações têm algumas vantagens significativas:
- Realce os elementos importantes: As animações chamam naturalmente a atenção, ajudando-o a realçar secções críticas do seu site.
- Melhore o envolvimento do utilizador: Como o conteúdo se revela gradualmente, é mais provável que os utilizadores se mantenham envolvidos.
- Conte uma história: A forma como o conteúdo se desenrola pode guiar o utilizador através da sua página, passo a passo, mantendo o seu interesse.
Com Elementor Proé fácil implementar estas animações e fazer com que o seu sítio Web seja vida.
Passo 1: Configurar a estrutura da sua página no Elementor Pro
Antes de começar a animar, precisa de definir a estrutura básica da sua página. Por exemplo, digamos que está a criar uma secção de herói com um título, uma imagem e um texto de apoio.
Criar uma nova secção:
- Aberto Elementoradicione uma nova página e utilize o Elementor Edit para aceder à página de edição.
- Clique no botão "Adicionar novo contentor" na página.
- Selecione um disposição em duas colunas com o lado esquerdo para adicionar conteúdo textual (como um título e texto de apoio) e o lado direito para adicionar uma imagem para melhorar o seu aspeto visual.
Adicione conteúdo:
- Coluna da esquerda: Adicionar um widget de título e um widget de texto para visualizar as informações principais da página.
- Coluna da direita: adicione um widget de imagem para colocar uma imagem visual relevante para acrescentar atratividade visual à página.
Cada bloco pode ser modificado para completar os elementos pretendidos. Esta configuração simples prepara o terreno para um design eficaz antes de começar a adicionar animação.
Passo 2: Adicionar animação de deslocação ao seu título
Vamos animar o título para que deslize suavemente a partir da esquerda à medida que o utilizador se desloca para baixo.
Selecionar o widget de título:
- Clique no widget Título para abrir as suas definições.
Ativar efeitos de deslocamento:
- Aceda ao separador Avançadas.
- Sob Efeitos de movimento, ligue Efeitos de deslocação.
Definir a deslocação horizontal:
- Active o deslocação horizontal efeito.
- Defina a direção para "da esquerda para a direita."
- Ajuste a velocidade para cerca de 4 para um efeito suave e visível.
Pré-visualização:
Quando percorrer a página, verá o cabeçalho deslizar para a esquerda. Pode ajustar a velocidade e a direção até obter o efeito pretendido.
Passo 3: Adicionar um efeito de paralaxe à imagem
Para tornar a sua página mais dinâmica, vamos agora adicionar um efeito de paralaxe à imagem. A imagem move-se a uma velocidade diferente da do texto, criando um efeito de camadas e 3D.
Selecionar o widget de imagem:
- Clique no widget Imagem e abra as suas definições.
Ativar efeitos de deslocamento:
- No separador Avançadas, active Efeitos de deslocação.
Aplicar a deslocação vertical:
- Active a deslocação vertical e defina a velocidade para cerca de 1,5. Isto cria um efeito de paralaxe subtil e suave, com a imagem a mover-se mais lentamente do que o texto.
Adicionar alterações de opacidade:
- Ativar Transparência nas opções de deslocação.
- Defina o Transparência nível para variar de 0% (totalmente transparente) para 100% (totalmente visível)permitindo que a imagem se desvaneça gradualmente à medida que o utilizador percorre a página. Ajuste o controlo deslizante da janela de visualização para controlar quando o efeito de esbatimento começa e termina, melhorando a experiência de deslocamento com uma transição visual suave.
Isto fará com que a imagem apareça gradualmente, acrescentando profundidade à experiência visual.
Passo 4: Criar um visual em camadas com paralaxe
Para melhorar ainda mais o design, pode adicionar efeitos de paralaxe a outros elementos, como imagens de fundo.
Adicionar uma imagem de fundo:
- Clique no contentor exterior da sua secção e vá para o separador Estilo.
- Adicione uma imagem de fundo.
Ativar efeitos de deslocamento para o fundo:
- No separador Avançadas, active Efeitos de deslocação.
- Defina a velocidade de deslocação vertical para cerca de 0,5, para que o fundo se mova mais lentamente do que os elementos em primeiro plano.
Pré-visualização:
À medida que desce, verá um efeito totalmente dinâmico: o título desliza para dentro, a imagem move-se com um efeito de paralaxe e o fundo desloca-se subtilmente para trás.
Passo 5: Adicione uma animação de deslocação para o texto
Selecione o widget de texto:
- Clique no botão caixa de texto para aceder à interface de definição do texto.
Active o efeito de deslocação:
- Aceda a o Avançado tab.
- Sob Efeitos de movimento, ativar Deslocação Efeitos.
Selecione o Transparência para criar um efeito de esbatimento no texto.
Defina a animação de transparência:
- Defina o intervalo de transparência de 0% (totalmente transparente) para 100% (totalmente visível). O texto passa de transparente a visível à medida que o utilizador percorre a página, criando uma transição suave.
Defina o ponto de ativação:
- No Efeito de deslocação pode ajustar as definições de Porta de visualização Percentagem para especificar onde a animação começa e termina a deslocação. Por exemplo, definir a animação para disparar quando o utilizador se desloca entre 20% e 80% de a página permite que o texto apareça juntamente com o conteúdo da página.
Passo 6: Adicione o efeito Slide In
Selecione o efeito Slide In:
- No âmbito do Avançado > Efeitos de movimento selecione Para a animaçãoe, em seguida, selecione Deslize para dentro no menu pendente.
- Pode escolher Slide In a partir da esquerda, Slide In a partir da direita ou Slide In de baixo para cima, consoante as suas necessidades de design.
Isto aplica-se a todos os cenários em que pretende melhorar o aspeto visual de uma página Web e a interatividade do utilizador.
Passo 7: Otimizar a experiência do utilizador
As animações acionadas pelo scroll podem melhorar significativamente um sítio Web, mas tem de manter a experiência do utilizador suave. Aqui ficam algumas dicas:
Mantenha-o simples: Demasiadas animações podem sobrecarregar o utilizador. Limite-se a alguns efeitos bem colocados para manter um aspeto profissional.
Otimização móvel: Nem todas as animações funcionam bem em dispositivos móveis. No Elementor Pro, pode desativar animações específicas para telemóveis e tablets para manter o sítio responsivo e de fácil utilização.
Testes entre navegadores: As animações de deslocamento podem comportar-se de forma diferente nos vários browsers. Teste sempre o seu design em browsers populares para garantir a consistência.
Conclusão
As animações acionadas por scroll e os efeitos de paralaxe podem transformar o seu sítio Web, tornando-o mais cativante e visualmente apelativo. Com as funcionalidades do Elementor Pro, pode implementar qualquer coisa, desde animações de texto subtis a designs complexos e em camadas. Quando bem executados, estes efeitos orientam a atenção do utilizador, contam uma história através do seu conteúdo e criam uma experiência de navegação perfeita em todos os dispositivos.
Seguindo estes passos, pode criar páginas Web dinâmicas e envolventes que cativam os utilizadores, mantendo o design funcional e responsivo.