Uma página onde tudo apenas fica lá parece um PDF Uma página onde as seções facilitam à medida que você as alcança parece construída Entrada Animação extensão em Complementos Mestres para Elementor adiciona esse movimento a qualquer elemento: escolha um efeito de uma biblioteca de 70 animações, defina o tempo e o elemento anima o momento em que ele rola em vista. Faz parte do Master Addons Pro e do Extensão de animação de entrada do elementor a página mostra como ela se compara com a opção integrada do Elementor.
Aqui está o efeito em uma página real Cada seção desaparece e sobe à medida que entra na janela de visualização:
O que a extensão Entrance Animation faz #
Uma vez habilitado, cada elemento Elementor recebe um Entrada Animação seção sob o Avançado aba. Atribuir uma animação lá, e o elemento começa escondido, em seguida, joga seu efeito quando o visitante rola para ele Seções, recipientes, títulos, imagens, botões: qualquer coisa no editor pode levar sua própria entrada.
A biblioteca de animação cobre toda a gama de estilos de entrada:
- Desaparecer família: simples, para baixo, para cima, para a esquerda e para a direita, cada uma com variações numeradas que alteram a distância percorrida.
- Deslize de Direita, Esquerda, Superior e Inferior.
- Máscara De Superior, inferior, esquerdo e direito, que limpam o elemento.
- Gire em com variantes Down and Up em direção a cada canto.
- Ampliar e Escalar para cima/escalar para baixo famílias para profundidade.
- Inverter-se Para cima, para baixo, para a esquerda e para a direita, mais Pulso In, Pulsar para fora, Agitar, Salte, e Jack na caixa.
Antes de começar #
- Wordpress com elementar instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? siga o guia instalação primeiro.
- Um ativo Complementos mestres Pro licença, já que Entrance Animation é uma extensão Pro.
Como ativar a extensão Animação de Entrada #
Do seu painel WordPress, vá para Adições Mestres e abra o Extensões guia. Animação de entrada lidera o Widgets Animação grupo com um emblema Hot, ao lado de Transforms and Reveal Clique em seu alternar para que ele fique roxo, em seguida, bater Salvar alterações e aguarde o verde “Configurações salvas com sucesso no aviso de”.
Escolha uma animação para um elemento #
Selecione o elemento no editor Elementor, abra o Avançado guia e expanda o Entrada Animação secção com o distintivo MA roxo A Animação dropdown contém toda a biblioteca. Na demonstração, a seção herói obtém um efeito Fade In enquanto o dropdown mostra os grupos Fade, Slide, Mask, Rotate, Zoom e Scale passando.
Escolha um e o editor visualiza imediatamente, para que você possa folhear as opções até que o movimento se encaixe no conteúdo Fade In Up é o padrão seguro: elevação sutil, sem drama, funciona em quase tudo.
Sintonize o tempo #
Abaixo do menu suspenso Animação, sente-se quatro controles de tempo.
- Duração (ms): quanto tempo a animação é executada A demo usa um exagerado 5000 ms para que o movimento seja fácil de ver; nas páginas de produção, 400 a 800 ms geralmente parece certo.
- Atraso (ms): uma pausa antes do efeito começar, 400 ms na demo Stagger atrasa através de elementos irmãos e eles entram um após o outro, em vez de todos de uma vez.
- Facilitação: a curva de aceleração O padrão funciona, mas uma facilidade de saída pousa mais naturalmente para as entradas.
- Contagem repetida: quantas vezes o efeito joga, de 1 a 5, ou infinito.
O resultado na página #
Publicar e rolar Cada elemento mantém até que ele entra na janela de visualização, em seguida, joga sua entrada: a lista de recursos sobe no lugar, os cartões de serviço desvanecem-se como uma linha, e a seção da equipe segue quando você alcançá-lo O GIF de animação no topo desta página mostra a sequência exata do site de demonstração.
Um cuidado da prática: animar seções, nem todos os widgets dentro delas Uma página onde cinquenta elementos cada voar de algum lugar lê como ruído Uma entrada por seção mantém o ritmo.
Onde as animações de entrada funcionam bem #
- Secções herói. Um título fade-in define o tom no momento em que a página é carregada.
- Linhas recurso. Cartões que sobem em sequência, usando atrasos escalonados.
- Estatísticas e contadores. O movimento chama a atenção quando os números aparecem.
- Depoimentos. Citações que facilitam a leitura como momentos em vez de uma parede de texto.
- Páginas de destino longas. Cada seção que se anuncia mantém o impulso de rolagem.
Vídeo Tutorial #
Assista às animações em movimento, desde habilitar a extensão até a página finalizada.
Perguntas frequentes #
Como adiciono uma animação de entrada no Elementor?
Habilite a extensão Animação de entrada na guia Extensões de complementos mestres, selecione qualquer elemento no editor e abra Animação de entrada na guia Avançado Escolha um efeito no menu suspenso Animação, defina a duração e o atraso e o elemento anima quando ele rola para a visualização.
Quais animações estão incluídas na extensão?
70 efeitos: Fade In (para cima, para baixo, para a esquerda e para a direita, com variações), Slide From e Mask From em todas as quatro direções, Gire In em direção a cada canto, Zoom In, Escale para cima e Escale para baixo, Flip In, Pulse In e Pulse Out, Shake, Bounce In e Jack In the Box Cada um funciona em seções, contêineres e widgets individuais.
Quando é que a animação de entrada é reproduzida?
Quando o elemento entra na janela de visualização Os elementos acima da dobra animam no carregamento da página, e tudo mais abaixo espera que o visitante role até ele A configuração Atraso adiciona uma pausa antes do início do efeito, que é como você escalonar uma linha de cartas.
Posso controlar a velocidade da animação?
Sim. Duração define o comprimento do efeito em milissegundos, Atraso adia seu início, Facilitação molda a curva de aceleração, e Repetir Contagem replays-lo Uma duração de 400 a 800 ms com um curto escalonamento entre elementos cobre a maioria dos projetos.
A extensão Entrance Animation é gratuita?
No. Entrance Animation faz parte do Master Addons Pro. O editor gratuito da Elementor tem sua própria animação básica de entrada em Advanced, Motion Effects, com duração predefinida e atraso.
Embrulhando #
O Extensão Animação Entrada dá a cada elemento Elementor uma entrada acionada por rolagem: um dropdown para o efeito, quatro campos para o tempo Mantenha durações abaixo de um segundo, escalonar os atrasos e animar no nível da seção, e a página parece deliberada em vez de decorada Para o movimento que faz loop por conta própria em vez de jogar uma vez em rolagem, olhe para o Extensão de efeitos flutuantes (Pro), e a lista completa de Widgets e extensões Master Addons tem o resto.
