Como adicionar animações de texto avançadas dentro de Divi com Letterize.js e Anime.js

As animações integradas do Divi fornecem toneladas de possibilidades quando se trata de adicionar uma vantagem extra ao seu site. Essas animações, no entanto, permitem adicionar uma animação a um contêiner por vez. Embora na maioria dos casos isso geralmente seja mais do que suficiente, há projetos em que você vai querer ir além. Você pode querer adicionar animações de texto avançadas, por exemplo. Neste tutorial, mostraremos exatamente como fazer isso. Este tutorial é um ótimo ponto de partida se você deseja aprender como combinar Divi, como uma estrutura, com bibliotecas Javascript externas. Criaremos nosso design inteiro usando os elementos e opções integrados do Divi e, em seguida, direcionaremos nosso Módulo de texto com as bibliotecas letterize.js e anime.js para criar animações de texto avançadas. Depois de entender a abordagem, você será capaz de criar qualquer tipo de animação de texto avançada que possa imaginar!

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Baixe o Layout de Animação de Texto Avançado GRATUITAMENTE

Para colocar as mãos no layout de animação de texto avançado gratuito, 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!

1. Crie o Design da Seção Hero

Adicionar nova seção

Espaçamento

Comece criando uma nova página ou abrindo uma existente. Dentro de sua página, adicione uma nova seção. Abra as configurações da seção e modifique o preenchimento superior e inferior em diferentes tamanhos de tela.

• Preenchimento superior: 180 px (desktop), 100 px (tablet), 50 px (telefone)
• Preenchimento inferior: 180 px (desktop), 100 px (tablet), 50 px (telefone)

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Espaçamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e remova todo o preenchimento inferior padrão.

• Preenchimento inferior: 0 px

Adicionar Módulo de Texto # 1 à Coluna

Adicionar cópia H1

O único módulo de que precisamos nesta linha é um Módulo de Texto. Adicione algum conteúdo H1 de sua escolha.

Configurações de texto H1

Vá para a guia de design do módulo e modifique as configurações de texto H1 da seguinte forma:

• Fonte do cabeçalho: Montserrat
• Cor do texto do título: rgba (232.232.232,0.41)
• Tamanho do texto do título: 80 px (desktop), 50 px (tablet), 40 px (telefone)
• Cabeçalho com espaçamento entre letras: -10px (desktop), -4px (tablet), -3px (telefone)
• Altura da linha de direção: 0,6em (desktop), 0,7em (tablet), 0,8em (telefone)

Adicionar linha # 2

Estrutura da Coluna

Adicione outra linha logo abaixo da anterior usando a seguinte estrutura de coluna:

Dimensionamento

Abra as configurações de linha e altere a largura máxima nas configurações de dimensionamento.

• Largura máxima: 1680 px

Espaçamento

Em seguida, remova toda a margem inferior e preenchimento.

• Margem inferior: 0px
• Preenchimento inferior: 0 px

Adicionar Módulo de Imagem à Coluna

Carregar ilustração

Em seguida, adicione um Módulo de Imagem e carregue a ilustração gratuita que você encontra na pasta que você baixou no início deste post.

Dimensionamento

Vá para a guia de design do módulo e force a largura total da imagem.

• Forçar largura total: Sim

Espaçamento

Adicione alguma margem inferior negativa a seguir.

• Margem inferior: -12%

Animação

E conclua as configurações do módulo adicionando as seguintes configurações de animação:

• Estilo de animação: Fade
• Atraso de animação: 3000ms

Adicionar linha # 3

Estrutura da Coluna

Passe para a próxima e última linha. Use a seguinte estrutura de coluna:

Espaçamento

Vá para a guia de design da linha e adicione alguns valores de preenchimento personalizados.

• Enchimento superior: 10%
• Estofamento inferior: 5%
• Preenchimento esquerdo: 3%
• Preenchimento direito: 3%

Sombra da caixa

Em seguida, ative uma sombra de caixa sutil.

• Força do desfoque de sombra da caixa: 80 px
• Cor da sombra: rgba (0,0,0,0,06)

Animação

E conclua as configurações da linha adicionando a seguinte animação:

• Estilo de animação: Fade
• Atraso de animação: 3000ms

Adicionar Módulo de Texto # 2 à Coluna

Adicionar conteúdo

É hora de adicionar módulos. O primeiro módulo de que precisamos é um Módulo de Texto com algum conteúdo de descrição.

Configurações de texto

Vá para a guia de design do módulo e modifique as configurações de texto de acordo:

• Fonte do texto: Lato
• Tamanho do texto: 18 px
• Espaçamento entre letras do texto: 1px
• Altura da linha de texto: 2.7em

Adicionar Módulo de Botão à Coluna

Adicionar cópia

O último módulo de que precisamos é um Módulo de botão. Insira alguma cópia de sua escolha.

Configurações de botão

Vá para a guia de design do módulo e altere as configurações do botão da seguinte forma:

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 16 px
• Cor do texto do botão: # 171cff
• Largura da borda do botão: 0 px
• Raio da borda do botão: 0 px

• Fonte do botão: Montserrat
• Estilo da fonte do botão: maiúscula

Espaçamento

Em seguida, aplique os seguintes valores de preenchimento dentro das configurações de espaçamento:

• Enchimento superior: 2%
• Estofamento inferior: 2%
• Preenchimento esquerdo: 5%
• Preenchimento direito: 5%

Sombra da caixa

Conclua as configurações do módulo adicionando a seguinte sombra de caixa:

• Posição vertical da sombra da caixa: 5 px
• Força de propagação da sombra da caixa: -2px
• Cor da sombra: # 171cff

2. Adicionar classe CSS ao título

Abra o módulo de texto nº 1 e clique na guia de texto

Agora que temos todos os elementos de design no lugar, é hora de adicionar as animações de texto avançadas ao nosso título. Abra o Módulo de Texto que contém a cópia H1 e selecione a guia de texto.

Adicionar CSS ID à tag H1

Dentro do H1, adicione um ID CSS personalizado.

• ID = ”headlineCopy”

3. Adicionar bibliotecas de letras e anime

Adicionar Módulo de Código à Coluna

Para criar as animações, estamos usando as bibliotecas letterize.js e anime.js. Para adicionar essas bibliotecas, insira um novo Módulo de Código na coluna da última linha.

Adicionar ambas as bibliotecas

Em seguida, adicione duas tags de script diferentes contendo as seguintes fontes que levam de volta às bibliotecas:

• src = ”https://cdn.jsdelivr.net/gh/WojciechWKROPCE/letterize-js/lib/letterize.min.js”
• src = ”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”

4. Adicionar código de animação

Animação para Carta em Nível Individual

Na última parte deste tutorial, vamos adicionar o código de animação que faz parte das bibliotecas letterize.js e anime.js. Para conseguir o efeito que você pôde ver na prévia deste post, vamos aplicar dois tipos de animações. A primeira animação é aplicada a cada letra individualmente e consecutivamente. Isso é feito com a biblioteca letterize.js. Esta biblioteca, em combinação com a primeira parte do código abaixo, coloca cada letra em sua cópia dentro de um intervalo separado. Essas extensões serão, então, direcionadas separadamente ao longo do processo de animação. Certifique-se de colocar o código abaixo entre as tags de script.

jQuery(function($){
$(document).ready(function(){

var headlineCopy = new Letterize({
targets: "#headlineCopy"
});

var animation = anime.timeline({
targets: '#headlineCopy span',
delay: anime.stagger(20),
loop: false
});

animation
.add({
opacity: [0, 1],
scale: [0, 1.2, 1],
duration: 1500,
elasticity: 600,
color: '#000',
})

.add({
color: '#00FFF7',
})

.add({
color: '#D2BEFB',
})

.add({
color: '#171cff',
});

});
});

Cada função add representa uma animação em uma linha do tempo de animações. Essas animações se aplicam a cada letra em um nível individual. Você pode modificar essas funções de adição como quiser, adicionar novas ou remover as atuais, apenas certifique-se de que a última função de adição seja fechada corretamente com um ';' no final (como você pode ver no código acima). Você pode adicionar diferentes propriedades CSS dentro dessas funções de adição. Você pode descobrir mais sobre as propriedades e como elas são usadas nos exemplos de documentação do anime.js. Neste tutorial, adicionamos propositadamente várias animações para mostrar como a linha do tempo funciona, mas você provavelmente vai querer algo mais sutil ou mais curto para seus próprios projetos.

Animação para frase

Depois de adicionar a primeira parte da animação, que tem como alvo cada letra individualmente, passaremos para a segunda parte de nossa animação. Esta parte tem como alvo a cópia inteira como um todo. A abordagem da animação é igual à anterior; estamos colocando o módulo inteiro dentro de uma animação da linha do tempo. Cada função add representa uma animação diferente dentro dessa linha do tempo. Você pode modificar essas funções de adição, adicionar novas ou remover as atuais. Certifique-se de colocar este novo código antes do final do código do script, como você pode notar na tela de impressão abaixo.

anime.timeline({loop: false})

.add({
targets: '#headlineCopy',
lineHeight: '1em',
delay: '1500'

})

.add({
targets: '#headlineCopy',
translateX: ['-5%', 0],
letterSpacing: '-2px',
});

Adicionar CSS personalizado para Span

Agora, como criamos um intervalo separado para cada uma de nossas letras, precisaremos alterar a propriedade de exibição de cada intervalo para permitir que as letras apareçam lado a lado. Para fazer isso, adicionaremos algum código CSS ao nosso módulo de código. Certifique-se de colocar o código entre as tags de estilo.

#headlineCopy span {
display: inline-block;
}

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Pensamentos finais

Nesta postagem, mostramos como criar animações de texto avançadas para o seu título. Construímos todo o design dentro do Divi e combinamos a estrutura com as bibliotecas letterize.js e anime.js. Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo!

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.