Como adicionar animações a seções / linhas

Era uma vez na Internet, adicionar animação ao seu site era uma tarefa complicada e um tanto especializada. Divi, no entanto, possui poderosas ferramentas de animação e efeitos de rolagem que você pode implementar sem precisar de muito conhecimento técnico. Qualquer pessoa pode adicionar esses efeitos aos seus sites com o mínimo de esforço. Embora os processos deste tutorial possam ser aplicados a qualquer elemento dentro do Divi, vamos nos concentrar nas seções e linhas hoje para obter efeitos específicos usando-os. Vamos nos aprofundar nas animações!

Antevisão

Área de Trabalho

Móvel

Carregue o Divi Builder em uma página ou postagem

A primeira coisa que você precisa fazer é entrar no Divi Builder. Quer você escolha um de nossos pacotes de layout (usaremos o pacote de layout do clube de tênis para este artigo) ou um design próprio, todas as etapas ocorrem nas configurações de Seção e Linha .

Com este design, estaremos animando 1 seção e 3 linhas para obter um efeito de carregamento sequencial.

Escolha um layout pré-fabricado

Para aplicar um de nossos pacotes de layout projetados profissionalmente, entre no Divi Builder e selecione Use a Premade Layout . Isso abrirá a lista de todos os brindes que oferecemos.

Escolha um layout

Em seguida, basta escolher qual pacote de layout deseja usar. Você pode classificar por categoria ou pesquisar palavras-chave para ver o que criamos para você.

Localize a (s) seção (ões) e linha (s) para animar

Quando o layout tiver importado todos os ativos e a página for carregada, você desejará encontrar a seção e a (s) linha (s) às quais deseja adicionar animações. Lembre-se de que as seções são codificadas por cor azul no Divi Builder e as linhas são verdes .

Com isso mapeado, vamos começar a adicionar essas animações!

Como adicionar animação a seções e linhas - Opção 1

Adicionar uma animação a uma seção Divi é muito simples. Você primeiro precisa inserir as configurações da seção . Em seguida, navegue até a guia Design e role até ver as opções de animação .

Nas opções de animação , você ajustará até 8 opções diferentes para a animação escolhida.

1. Estilos de animação é onde você escolhe como a animação aparece. Se a seção vai rolar de ponta a ponta ou saltar do lado da página como uma bola. Os mais comuns são Fade e Slide .
2. Direção - você definirá a direção para a qual o elemento se move. Um valor para cima significa que a seção começará na parte inferior e se moverá para cima. Up não é o ponto de origem.
3. Duração - Quanto tempo a animação dura do início ao fim. Um valor menor aumentará a velocidade e um valor maior diminuirá a velocidade.
4. Atraso - Esta opção evita que a animação seja acionada o mais rápido possível e pode ajudar a chamar a atenção para ela mais do que se fosse acionada imediatamente.
5. Intensidade - quanto mais baixo o valor, mais suave do que a animação, enquanto os valores mais altos são mais rápidos e agressivos.
6. Opacidade inicial - Um valor de 0 fará com que a animação comece invisível e entre em foco ao longo da duração. 100 significa que o elemento está totalmente visível antes mesmo de a animação começar.
7. Curva de velocidade - permitirá que você ajuste a suavidade com que a animação começa e termina.
8. Repetir - sua animação é um efeito único ou é algo que você deseja repetir continuamente? Se uma animação for definida como Uma vez , a página deve ser recarregada para iniciá-la novamente.

Como adicionar animação a seções e linhas - Opção 2

Divi também possui um recurso chamado Efeitos de rolagem . Essas são animações que disparam sempre que o usuário rola sua janela de visualização para o elemento. Os efeitos de rolagem podem ser definidos para qualquer elemento e podem ser combinados com as opções de animação mencionadas acima.

Como habilitar efeitos de rolagem

Novamente, qualquer elemento em Divi pode ser configurado para ter efeitos de rolagem habilitados, mas estamos lidando com seções e linhas hoje. Portanto, insira as configurações da seção , navegue até a guia Avançado e encontre o título Efeitos de rolagem .

Escolha os efeitos e gatilhos

Dentro das opções de efeitos de rolagem , você encontrará várias guias para diferentes tipos de animações que podem ser acionadas na rolagem.

• Posição fixa - se a seção ou linha adere ou não à tela do usuário à medida que ele passa.
• Efeitos de transformação - são os efeitos de animação reais: movimento horizontal e vertical, fade in / out, escala de tamanho, rotação e desfoque.
• Definir [Recurso] - Você será capaz de definir onde o efeito é mais visível na tela e quando / onde ocorre
• Motion Effect Trigger - você determinará se a animação começa quando a parte superior do elemento entra na janela de exibição, o centro do elemento ou a parte inferior.

A principal diferença entre essas opções e o uso das opções de animação na seção anterior se resume a se você deseja que a animação seja automatizada ou se deseja que ela seja acionada toda vez que o usuário realizar uma ação. Você pode combinar animações usando os efeitos de rolagem e as opções de animação, que usaremos para o efeito do tutorial principal.

Combinando animações para seções e linhas

Você pode criar alguns efeitos impressionantes para seus sites, combinando várias animações para serem acionadas em momentos diferentes. Usando a opção Animation Delay , seu site pode animar uma série de seções, linhas e elementos em sequência para obter alguns visuais impressionantes.

Para começar, vamos definir o Estilo de Animação nas configurações da Seção para Slide com a Direção da Animação definida para Cima .

Manteremos o restante das opções em seus padrões. Especialmente o Atraso de animação . Queremos que a Seção seja acionada quando estiver à vista.

Configurações de animação para a linha 1

A seguir, ajustaremos a primeira linha da seção. Vamos para as configurações de linha , vamos para as opções de animação na guia Design e novamente selecione Slide . Desta vez, queremos alterar a direção para baixo e o retardo da animação para 5 00ms . 1000ms é igual a 1 segundo, lembre-se.

Como deixamos o sincronismo da seção em 0 ms para disparar imediatamente, queremos que a linha seja ligeiramente deslocada, permitindo que a animação inicial termine principalmente antes que esta comece.

Configurações de animação para a linha 2

A seguir, iremos para as configurações para a segunda linha da página e ir para as opções de animação . Novamente, selecionaremos Slide para o estilo de animação e esta linha deslizará em direção à direita .

Além disso, vamos definir o Atraso da animação em 1000ms , o que significa que este será acionado assim que a primeira animação terminar.

Configurações de animação para a linha 3

Para a terceira linha que estamos animando, usaremos efeitos de rolagem para atingir nossos objetivos. Como nossa terceira linha começa logo acima da dobra, a maioria das animações não seriam vistas se simplesmente usássemos um atraso de tempo como fizemos com os outros elementos. Então, vamos fazer com que não seja esse o caso.

Opções de animação

Primeiro, vamos repetir os processos acima. Somente com esta linha, estamos definindo o estilo de animação para Fade. Em seguida, definiremos a duração para 500ms para que esta linha apareça mais rapidamente durante sua animação. Vamos adiá-la por 1500ms para garantir as outras animações são totalmente concluída antes de este começar.

Finalmente, certifique-se de verificar se a Opacidade inicial está definida como 0% . Queremos que essa linha fique invisível até que esteja pronta para ser vista.

Configurações de efeitos de rolagem

É aqui que as coisas ficam divertidas, porque podemos combinar efeitos. Clique na guia Avançado da Linha e encontre os Efeitos de rolagem . Encontre a guia Movimento horizontal e certifique-se de ativá-la. Em seguida, defina o acionador do efeito de movimento como meio do elemento . Estamos usando o meio em vez do topo para garantir que o efeito não comece a surtir efeito até que o usuário role, apenas no caso de a janela de visualização do usuário mostrar o topo da linha.

Com esse conjunto, a linha irá esperar até que tudo o resto termine de ser animado para aparecer e, então, quando o usuário rolar em direção a ela, a linha inteira parecerá deslizar da lateral da tela.

Resultados finais

Quando você terminar tudo isso, seus resultados deverão ser semelhantes a este.

Área de Trabalho

Móvel

Conclusão

Adicionar efeitos de animação é uma maneira infalível de tornar seu site mais dinâmico, mais interessante e mais atraente visualmente. Usando as ferramentas integradas de animação e efeitos de rolagem do Divi, você pode criar combinações incríveis que irão impressionar qualquer visitante que passar por ali.

O que você usou os efeitos de animação Divi para criar a partir de suas seções e linhas? Vamos vê-los nos comentários!

Imagem de destaque do artigo por Vectorchok / shutterstock.com