Entrada Animação
Primeiras impressões stick. Em vez de deixar seu conteúdo apenas aparecer, faça-o chegar O Entrada Animação a extensão adiciona movimento a qualquer elemento Elementor no momento em que ele aparece, com Mais de 70 efeitos para escolher entre: desvanece, desliza, salta, inverte e amplia Você define a velocidade, o atraso e a flexibilização, para que um título possa entrar suavemente enquanto uma linha de ícones de recursos aparece um após o outro. Sem CSS, sem quadros-chave, apenas algumas configurações na guia Avançado.
Use-o bem e uma animação de entrada puxa o olho para baixo da página e faz o site se sentir vivo no primeiro pergaminho Use-o em tudo e ele se transforma em ruído O vídeo abaixo cobre o básico, e mais abaixo EU entro na lista de efeitos completos, como aplicar uma animação em toda uma seção, e como obter o tempo certo.
O que é uma animação de entrada?
Uma animação de entrada é o movimento que um elemento faz ao entrar na tela O visitante rola, um título ou imagem ou botão atinge a janela de visualização, e ela desaparece, desliza ou salta no lugar em vez de ter estado sentado lá o tempo todo Você os verá chamados efeitos de entrada, animações de rolagem ou uma animação de entrada do site A mesma ideia a cada vez: uma página estática que começa a reagir à medida que você a desce.
Você mesmo pode escrever tudo isso com animações CSS Então os quadros-chave são seus para manter, e assim é o comportamento responsivo em cada tamanho de tela Os Complementos Mestres kit de ferramentas de animação move isso para as configurações do elemento, para que você escolha um efeito de um menu suspenso e pule o código.
Uma biblioteca com mais de 70 efeitos de entrada
Com mais de 70 predefinições, há uma maneira adequada de introduzir quase qualquer seção Quer que fique quieto? Fade In. Quer energia? Bounce ou Rubber Band. Depois de algo mais deliberado? Flip ou Slide. Essa propagação é útil porque permite dar às seções seu próprio caráter: calmo e suave para uma declaração de missão, um pouco lúdico para a linha de recursos.
- Desaparece: Fade In, Fade In Up, Fade In Down e o resto, para chegadas tranquilas.
- Slides: os elementos deslizam da esquerda, direita, superior ou inferior.
- Saltos: Bounce e Rubber Band para uma seção que precisa ser notada.
- Rotações e inversões: Vire e gire quando quiser um pouco de profundidade.
- Zooms e efeitos especiais: Zoom In, Velocidade da Luz e outros destaques para um herói ou um CTA.
- Combine o efeito com o trabalho: os altos em um apelo à ação, um suave desbotamento no corpo do texto.
- Visualize antes de se comprometer: o editor reproduz a animação enquanto você passa o mouse sobre ela na lista.
Controle de duração, atraso e facilidade
O tempo é onde a maioria das animações são ganhas ou perdidas, e isso é mais do que uma alternância liga/desliga. Defina o Duração em milissegundos para fazer um movimento rápido e rápido ou lento e prolongado. Adicione um Atraso portanto, uma fileira de itens vem um após o outro, em vez de todos de uma vez. Escolha um Facilitação curve-se para que o movimento acelere e desacelere da maneira que um objeto real faria, em vez de deslizar em um ritmo plano e robótico.
- Defina a velocidade: 500 ms sente rápido, 1500 ms sente relaxado Esse número muda todo o humor.
- Acerte uma sequência: aumente o atraso em cada ícone consecutivo e eles aparecerão um por um.
- Escolha a flexibilização: Ease-Out (início rápido, parada suave) lê como natural para a maioria das entradas É aquele que EU alcancei primeiro.
Como definir uma animação de entrada padrão para todos os elementos?
As pessoas perguntam muito sobre isso: você pode aplicar uma animação de entrada para tudo de uma vez no Elementor? resposta direta, Elementor core não tem um único switch global que anima cada elemento no site O que funciona na prática é animar no nível do contêiner ou seção, em seguida, reutilizar essas configurações.
- Selecione o secção ou contentor em vez de cada widget dentro dele Abra Avançado → Master Addons Entrada Animação e escolha o seu efeito O bloco inteiro, em seguida, chega junto como ele rola para dentro.
- Para reutilizar o mesmo movimento, clique com o botão direito no elemento, clique em Copiar, então Estilo Pasta na próxima seção As configurações de animação andam junto com o estilo, então você o define uma vez e o cola na página.
- Para uma cascata em vez de tudo disparando junto, mantenha o efeito o mesmo e aumente o Atraso um pouco em cada seção à medida que você desce.
Isso lhe dá uma animação de entrada consistente em todos os seus elementos sem tocar no código, que é tão próximo de um padrão quanto o Elementor lhe dá O completo Entrada Documentação animação cobre cada configuração.
Onde as animações de entrada mais ajudam?
- Seções de heróis: um Fade In Up no título e, em seguida, um pequeno atraso no botão abaixo dele.
- Linhas de recursos: escalonar os ícones para que eles pousem um por um.
- Estatísticas e contadores: um zoom à medida que os números são visualizados.
- Depoimentos e logotipos: um desbotamento suave para que eles não se encaixem abruptamente.
- Chamadas à ação: um Bounce ou Rubber Band no ponto em que alguém decide.
A extensão vem com o mais amplo Widgets e extensões Master Addons. O página preços mostra em qual plano ele pousa.
Perguntas frequentes para animação de entrada
Muitas animações de entrada irão desacelerar meu site?
Em uma página com dezenas de elementos animados pode adicionar algum peso, mas os efeitos são leves para começar A verdadeira correção é a contenção: animar as seções-chave e manchetes, não todos os parágrafos Alguns bem colocados mal se registram Se o tempo de carregamento está em sua mente, estes dicas para acelerar sites Elementor ajuda.
Por que minha animação de entrada do Elementor não está funcionando?
Geralmente é uma das três coisas A animação só dispara na primeira vez que o elemento entra na janela de visualização, então role para baixo fresco para testá-lo em vez de rolar de volta para cima Certifique-se de que o efeito está no elemento real e não um wrapper vazio em torno dele E limpe seu plugin de cache depois de publicar, já que uma página em cache servirá a versão antiga sem a animação.
Posso usar animações diferentes no desktop e no celular?
Não. Você não pode definir a animação de forma independente para desktop, tablet e celular no Elementor. Qualquer efeito que você escolher se aplica a cada ponto de interrupção, então escolha um que ainda pareça correto em uma tela pequena.
Qual é a configuração Facilitação e qual devo usar?
Facilitar controla o ritmo do movimento Linear mantém uma velocidade constante e pode parecer robótico Facilidade-Out começa rápido e termina lento, como algo rolando para uma parada suave, que parece natural Facilidade-In faz o oposto Para a maioria das animações de entrada, ir com Facilidade-Out.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
Duplicador de postagem/página
