Como animar cartas para designs de texto exclusivos em Divi

A animação se tornou uma parte comum da experiência do usuário em sites modernos. Além de parecer legal, ele também pode adicionar um elemento interativo sutil que envolve o usuário, dando vida ao conteúdo. Os efeitos de animação integrados do Divi permitem animar praticamente qualquer elemento em uma página com diferentes estilos de animação.

Neste tutorial, vou mostrar como animar letras para alguns designs de texto exclusivos no Divi. Ao colocar letras individuais em um módulo de texto, você pode direcionar a animação de cada letra com diferentes estilos de animação, duração e atrasos que farão o conteúdo se destacar de uma forma criativa. Essa técnica é puramente para fins de design, uma vez que as letras que compõem o conteúdo não serão muito amigáveis ​​seo. No entanto, as letras animadas permitem que você compartilhe sua história com os usuários de uma forma impressionante.

Vamos começar.

Espiada

Baixe o Layout de exemplos de design de carta de animação GRATUITAMENTE

Para colocar suas mãos nos designs de animação de letras deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Para importar o layout para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi Builder.

Vamos para o tutorial, vamos?

Começando

Para este tutorial, tudo que você precisa é Divi. Estaremos construindo os designs do zero usando o construtor Divi no front-end. Para começar, crie uma nova página, dê um título à sua página e clique em deploy para usar o Divi Builder. Em seguida, escolha a opção “construir do zero” e clique para construir no front end.

Agora você está pronto para projetar!

Construindo o Layout para Letras em Animação

Adicionando a seção, linha e coluna

Vá em frente e crie uma nova seção regular com uma linha de uma coluna.

Antes de começarmos a adicionar nossos módulos de texto (que conterão letras brancas), vamos adicionar uma imagem de fundo escuro à seção. Abra as configurações da seção e adicione uma imagem de fundo. Estou usando uma imagem de fundo abstrata do layout predefinido da página inicial da Investment Company.

Criação de blocos de letras individuais com módulos de texto

Antes de começarmos a adicionar animação às letras, devemos primeiro criar um módulo de texto separado para cada letra que desejamos adicionar. Para este exemplo, vamos criar o texto “Divi Design”. Como essa frase de texto inclui 11 espaços de caracteres (incluindo o espaço entre as letras, precisaremos adicionar 11 módulos de texto diferentes.

Vá em frente e adicione um módulo de texto à coluna.

Na caixa de conteúdo, adicione a primeira letra do seu texto que, neste caso, é a letra “d”.

Em seguida, atualize as configurações de design de texto da seguinte forma:

• Fonte do texto: Rubik
• Estilo da fonte do texto: TT
• Cor do texto do texto: #ffffff
• Tamanho do texto do texto: 80 px (desktop), 50 px (tablet), 30 px (telefone)
• Altura da linha de texto: 1,6em
• Orientação do texto: centro

Em seguida, adicione uma animação ao módulo de texto da seguinte maneira:

• Estilo de animação: slide
• Direção da animação: para cima
• Duração da animação: 600ms
• Atraso de animação: 100ms
• Opacidade inicial da animação: 100%

Duplique o módulo de texto e atualize o conteúdo com a letra “i”. Em seguida, aumente o atraso da animação em 100 ms da seguinte maneira:

• Atraso de animação: 200ms

Duplique o módulo de texto e atualize o conteúdo com a letra “v”. Em seguida, aumente o atraso da animação para 300 ms.

• Atraso de animação: 300ms

Duplique o módulo de texto e atualize o conteúdo com a letra “i”. Em seguida, aumente o atraso da animação para 400 ms.

• Atraso de animação: 400 ms

Para este próximo módulo de texto, queremos adicionar um espaço em branco. Duplique o módulo de texto e adicione o seguinte html à caixa de conteúdo:

 

Não há necessidade de atualizar o atraso da animação para este.

Em seguida, duplique o módulo de texto e atualize o conteúdo com a letra “d”. Esta é a primeira letra da palavra “design”. Em seguida, aumente o atraso da animação para 500 ms.

• Atraso de animação: 500ms

Continue o processo de duplicação do módulo de texto e aumente o atraso da animação em 100 ms para cada uma das letras restantes que formam a palavra “design”.

• Letra “e”: atraso da animação 600ms
• Letra “s”: atraso de animação 700ms
• Letra “i”: atraso de animação 800ms
• Letra “g”: animação com atraso de 900ms
• Letra “n”: atraso de animação 1000ms

Aqui está a aparência do design até agora.

Adicionando Flex Property para alinhar os módulos horizontalmente

Ainda não é o resultado que procuramos. Mas tudo o que precisamos fazer magicamente reunir o design é adicionar um pequeno trecho de css à coluna da linha. Para fazer isso, abra as configurações de linha e adicione o seguinte CSS personalizado ao elemento principal da coluna.

display: flex;

A propriedade display: flex alinha todos os módulos horizontalmente em uma mesa flexível que se ajusta perfeitamente às diferentes larguras do navegador. E uma vez que os módulos estão em uma linha de uma coluna, o design não vai quebrar em tablets ou dispositivos móveis.

Também precisamos adicionar uma largura de medianiz personalizada para tirar a margem inferior sob as letras e adicionar um pouco de preenchimento superior e inferior à linha para que as letras tenham algum espaço para animar.

• Largura da calha: 1
• Preenchimento personalizado: 5vw superior, 5vw inferior

Aqui está o resultado final.

Adicionando diferentes estilos de animação

Com esta configuração, você pode adicionar facilmente novos estilos de animação para efeitos completamente exclusivos. Para fazer isso, você pode aproveitar as vantagens do recurso multisseleção do Divi para atualizar todos os módulos de uma vez. No front end, mantenha a tecla shift pressionada e clique no primeiro e no último módulo de texto. Em seguida, abra as configurações de um dos módulos selecionados.

Isso abrirá o modal de configurações do elemento, que permitirá que você atualize as configurações de todos os módulos selecionados. Não queremos alterar o atraso da animação porque queremos manter o efeito em cascata em cada uma das letras. No entanto, podemos atualizar as outras opções de animação de maneiras diferentes para criar resultados totalmente exclusivos.

Sugiro duplicar a seção antes de testar uma nova animação para que você possa manter os exemplos anteriores.

Aqui estão alguns exemplos.

Reverse Zoom Text Animation

Para animar letras com um efeito de zoom reverso, atualize as configurações do elemento (as configurações de todos os módulos) com o seguinte:

• Estilo de Animação: Zoom
• Direção da Animação: Centro
• Intensidade de animação: 200%

Aqui está o resultado final.

Rolling Wave Text Animation

Para animar as letras com um efeito de onda rolante, atualize as configurações do elemento (as configurações de todos os módulos) com o seguinte:

• Estilo de animação: girar
• Direção da animação: para cima
• Intensidade de animação: 100%

Aqui está o resultado final.

Domino Text Animation

Para animar o texto com um efeito dominó, atualize as configurações do elemento (as configurações de todos os módulos) com o seguinte:

• Estilo de animação: Flip
• Direção da animação: esquerda
• Intensidade de animação: 100%

Aqui está o resultado final.

Animação de texto em pé

Para animar o texto com um efeito dominó, atualize as configurações do elemento (as configurações de todos os módulos) com o seguinte:

• Estilo de animação: Dobra
• Direção da animação: para cima
• Intensidade de animação: 100%

Em seguida, adicione perspectiva para criar um elemento de design 3D adicionando o seguinte css ao Elemento da coluna principal nas configurações de linha.

CSS do elemento da coluna principal:

perspective: 1000px;

Aqui está o resultado final.

Animar cartas usando uma combinação de direções de animação

Se quiser ser mais criativo, você pode animar as letras usando uma combinação de efeitos de animação. Para este exemplo, vou usar uma combinação de direções de animação e intensidade para o estilo de slide. Isso nos dará uma apresentação totalmente única.

Veja como fazer.

Primeiro, duplique uma das seções que construímos anteriormente para que possamos obter uma vantagem inicial no processo de design.

Em seguida, exclua os primeiros 4 módulos de texto para que apenas o texto “design” seja exibido.

Configurações da seção

Em seguida, como queremos que algumas das letras da animação comecem fora da janela de visualização da seção, precisaremos adicionar um pequeno trecho de css às ​​configurações da seção da seguinte maneira:

overflow: hidden;

Isso manterá as letras ocultas até que entrem na seção.

Configurações de linha

Agora, para garantir que nossos módulos de texto (letras) fiquem centralizados, precisamos adicionar o seguinte css às ​​configurações de linha:

display:flex;
justify-content: center;

Configurações comuns do módulo de texto

Usando multiselect, atualize todos os seis módulos de texto com as seguintes configurações de elemento:

• Margem personalizada: 3% à esquerda, 3% à direita
• Largura da borda: 1px
• Cor da borda: #ffffff

• Estilo de animação: slide
• Duração da animação: 2.000 ms
• Atraso de animação: 100ms
• Intensidade de animação: 300%

Isso cuida das configurações básicas de animação que serão comuns a todos os módulos de texto. Agora podemos ajustar as configurações de animação para eles individualmente.

Configurações individuais do módulo de texto

Neste ponto, podemos nos divertir ajustando as configurações do módulo de texto individual para alterar a direção da animação para cada um. Isso nos permitirá animar as letras de uma forma totalmente única. Para cada letra, atualize a direção e intensidade da animação da seguinte forma:

• Letra D
  Direção da animação: para cima
• Letra E
  Direção da animação: baixo
• Cartas
  Direção da animação: esquerda
  Intensidade de animação: 80%
• Letra I
  Direção da animação: direita
  Intensidade de animação: 80%
• Letra G
  Direção da animação: baixo
• Letra N
  Direção da animação: para cima

Aqui está o design final.

E é assim que fica no celular.

Pensamentos finais

Acho que é seguro dizer que Divi tem várias maneiras de animar letras, uma vez que você tenha a configuração adequada. E devo dizer que foi muito difícil parar de brincar com as configurações de animação ao construir esses exemplos. Existem tantas variações possíveis para experimentar! De qualquer forma, espero que isso lhe dê um pouco de inspiração para seu próximo projeto. Se qualquer coisa, você pode querer construí-lo apenas para se divertir.

Estou ansioso para ouvir de você nos comentários.

Saúde!