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:

1. Aberto Elementoradicione uma nova página e utilize o Elementor Edit para aceder à página de edição.

2. Clique no botão "Adicionar novo contentor" na página.

3. 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:

1. Coluna da esquerda: Adicionar um widget de título e um widget de texto para visualizar as informações principais da página.

2. 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 título deslizar da esquerda para a direita. 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:

1. Aceda a o Avançado tab.
2. 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.