Se você está procurando uma maneira de criar animações suaves com os efeitos de rolagem integrados do Divi, você vai adorar este tutorial. Mostraremos como combinar o snap de rolagem com os efeitos de movimento integrados do Divi para criar seções de altura total que você pode percorrer de uma vez. 

Começaremos criando a primeira seção. Portanto, reutilizaremos esta seção em todo o design de nossa página. Para habilitar o ajuste de rolagem, usaremos as propriedades de ajuste de rolagem CSS que atribuiremos às seções, HTML, cabeçalho e rodapé de nossa página. 

Resultado Possível

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

Divi scroll capturando visualização da área de trabalho

1. Crie uma nova página e comece a criar a primeira seção

Adicione uma nova página e mude para o Visual Builder

Comece adicionando uma nova página. Insira o título da página, publique a página e mude para o Visual Builder.

Adicionar um artigo divi
Artigo de criação divi

Configurações de seção

dimensionamento

Uma vez dentro da nova página, abra a seção já existente e altere as configurações de dimensionamento.

  • Altura mínima: 100vh
Dimensionamento de divis

Elemento principal

Também adicionamos duas linhas de código CSS à seção. Essas linhas de código CSS nos ajudarão a transformar a seção em um ponto de ajuste para o ajuste de rolagem.

scroll-snap-align: start; scroll-snap-stop: normal;

Seção css divi de conteúdo

visibilidade

Para garantir que nada esteja além do contêiner de seção, ocultaremos os estouros de seção.

  • Estouro horizontal: oculto
  • Estouro vertical: oculto
Ocultar seção divi

Adicionar linha 1

Estrutura da coluna

Continue adicionando uma nova linha à seção usando a seguinte estrutura de colunas:

Escolha a estrutura da coluna

dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e modifique o tamanho da seguinte maneira:

  • Usar largura da calha personalizada: Sim
  • Largura da calha: 1
  • Largura: 100%
  • Largura máxima: 100%
Configuração de espaçamento de coluna

Espaçamento

Também estamos removendo o preenchimento superior e inferior padrão da seção.

  • Preenchimento superior: 0px
  • Preenchimento inferior: 0px
Configure o espaçamento divi

Posição

E reposicionaremos a linha de acordo:

  • Posição: Absoluto
  • Localização: Bottom Center
Configuração da posição da coluna Divi

Adicionar módulo de texto à coluna

Deixe a caixa de conteúdo vazia

O único módulo que precisamos nesta linha é um módulo de texto. Certifique-se de deixar a caixa de conteúdo do módulo vazia.

Módulo de texto Divi

Cor de fundo

Em seguida, altere a cor do plano de fundo.

  • Cor de fundo: # ffee00
Configuração do texto da cor de fundo Divi

Configurações de texto

Também removeremos a altura da linha de texto do módulo.

  • Altura da linha de texto: 1em
Ajuste de texto de altura de linha Divi

Dimensionamento

Em seguida, vamos às configurações de tamanho e alteramos a largura.

  • Largura: 30%
Espaçamento do módulo de texto divi

Espaçamento

Transformaremos o módulo em um quadrado adicionando alguns preenchimentos superiores também.

  • Estofamento superior: 30%
Módulo divi de espaçamento interno

Adicionar linha 2

Estrutura da coluna

Na próxima linha. Use a seguinte estrutura de coluna:

Escolha o layout da linha 2 divi

dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere as configurações de dimensionamento na guia de design:

  • Use uma largura de calha personalizada: Sim
  • Largura da calha: 1
  • Largura: 60vw
  • Largura máxima: 100%
Configuração da coluna 2 divi

espaçamento

Em seguida, adicione uma margem superior personalizada em diferentes tamanhos de tela.

  • Margem superior: 20vh (desktop), 5vw (tablet e telefone)
Configuração de espaçamento do módulo de coluna Divi

Espaçamento da coluna 2

Em seguida, abriremos as configurações na coluna 2 e adicionaremos valores de preenchimento personalizados.

  • Estofamento superior: 2vh (tablet e telefone)
  • Estofamento esquerdo: 2vw
  • Estofamento direito: 2vw
Módulo de 2 divi de configuração de espaçamento de coluna

Adicione um módulo de imagem à coluna 1

Carregar imagem

É hora de adicionar mods, adicionar um mod de imagem à coluna 1 e fazer upload de uma imagem de sua escolha.

Carregando imagem diiv

dimensionamento

Forçaremos a largura total do módulo.

  • Forçar largura total: Sim
Forçar divi de largura total

Adicione o módulo de texto # 1 à coluna 2

Adicionar conteúdo H2

Na segunda coluna, o primeiro módulo que precisamos é um módulo de texto com conteúdo H2.

Coluna 2 do módulo de texto

Configurações de texto H2

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

  • Fonte do Título 2: Anton
  • Item 2 Tamanho do texto: 5vw (desktop), 7vw (tablet), 9vw (telefone)
Alterar fonte diiv

Adicione o módulo de texto # 2 à coluna 2

Adicionar conteúdo

Adicione outro módulo de texto logo abaixo do anterior e insira o conteúdo da descrição de sua escolha.

Adicionar conteúdo ao módulo de texto divi

Configurações de texto

Altere as configurações de texto do módulo da seguinte maneira:

  • Fonte do texto: Open Sans
  • Tamanho do texto: 0.8vw (computador), 2vw (tablet), 2.5vw (telefone)
  • Altura da linha de texto: 1,8 em
Configuração de alinhamento Divi

espaçamento

E adicione margens superior e inferior personalizadas às configurações de espaçamento.

  • Margem superior: 2vw
  • Margem inferior: 2vw
Configuração de espaçamento do módulo de texto Divi

Adicione um módulo de botão à coluna 2

Adicione uma cópia

O próximo e último módulo de que precisamos nesta coluna é um módulo de botão. Adicione uma cópia de sua escolha.

Adicionar um botão divi

Configurações de botão

Estilize o botão de acordo:

  • Use estilos personalizados para o botão: Sim
  • Tamanho do texto do botão: 1vw (computador), 2vw (tablet), 3vw (telefone)
  • Cor do texto do botão: # 333333
  • Cor da borda do botão: # 333333
  • Raio do botão: 1 px
Configurações do botão Divi
  • Fonte do botão: Anton
  • Estilo da fonte do botão: Maiúsculas
Estilo do botão do módulo Divi

espaçamento

E conclua as configurações do módulo adicionando um valor personalizado com base nos tamanhos de tela.

  • Margem Interna Alta: 1vw (Desktop), 2vw (Tablet), 3vw (Telefone)
  • Margem interna baixa: 1vw (desktop), 2vw (tablet), 3vw (telefone)
  • Margem interna esquerda: 3vw (área de trabalho), 5vw (tablet), 7vw (telefone)
  • Margem direita da Internet: 3vw (desktop), 5vw (tablet), 7vw (telefone)
Configuração de espaçamento do botão Divi

2. Adicione efeitos de rolagem a diferentes elementos

Módulo de texto na linha # 1

Animação Vertical

Quando todos os elementos estiverem no lugar, é hora de adicionar os efeitos de rolagem. Abra o Módulo de texto na sua primeira linha e use algum movimento vertical.

  • Ativar movimento vertical: Sim
  • Deslocamento inicial: 4
  • Deslocamento médio: 0
  • Deslocamento final: -4
  • Gatilho de efeito de movimento: meio do elemento
Animação do módulo de texto Divi

Linha 2

Coluna 1

Animação Horizontal

Em seguida, abra a primeira coluna da sua segunda linha e adicione um movimento horizontal.

  • Ativar movimento horizontal: Sim
  • Deslocamento inicial: -3
  • Deslocamento médio: 0 (de 40% a 60%)
  • Deslocamento final: -3
  • Efeito de movimento do gatilho: meio do elemento
Animação horizontal
Fade in e out

Também aplicamos um efeito fade in e fade out à mesma coluna.

  • Ativar fade in e out: Sim
  • Opacidade inicial: 0%
  • Opacidade média: 100%
  • Opacidade final: 100%
  • Efeito de movimento do gatilho: meio do elemento
Fade animação

Coluna 2

Movimento horizontal

Em seguida, abriremos os parâmetros da segunda coluna e aplicaremos os seguintes parâmetros de movimento horizontal:

  • Ativar movimento horizontal: Sim
  • Deslocamento inicial: 3
  • Deslocamento médio: 0 (de 40% a 60%)
  • Deslocamento final: 3
  • Efeito de movimento do gatilho: meio do elemento
Coluna de movimento horizontal 2
Fade in e out

Com um efeito de desbotamento de entrada e saída.

  • Ativar fade in e out: Sim
  • Opacidade inicial: 0%
  • Opacidade média: 100%
  • Opacidade final: 100%
  • Efeito de movimento do gatilho: meio do elemento
Produção de fondue

4. Reutilize a primeira seção

Clonar seção quatro vezes

Depois de concluir a primeira seção e seus efeitos de rolagem, você pode cloná-la quantas vezes quiser.

Seção clone

Altere as cores de fundo de todas as outras seções

Mudaremos a cor de fundo de todas as outras seções.

  • Cor de fundo: # 111111

5. Adicione código CSS para ativar a captura de rolagem na página HTML

Adicione um módulo de código à última seção da página

Agora, para habilitar a captura de rolagem no HTML de nossa página, vamos adicionar um módulo de código em qualquer lugar na última seção de nossa página.

Inserção de módulo de código

Inserir código CSS HTML

Essas linhas de código CSS nos ajudarão a aplicar o alinhamento de rolagem ao código HTML de nossa página:

<style> html {overflow-x: hidden;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(100vh);} </style>

Adicionar início de ajuste de rolagem ao cabeçalho e rodapé

Garantiremos que nosso cabeçalho e rodapé também sejam pontos de captura de rolagem (assim como nossas seções) adicionando também as seguintes linhas de código CSS:

cabeçalho, rodapé {scroll-snap-align: start;}

para terminar

Neste artigo, mostramos como criar animações suaves combinando o snap de rolagem com os efeitos de movimento integrados do Divi. Esta é uma ótima maneira de ativar os efeitos de rolagem com apenas uma rolagem. 

A captura de rolagem ajuda visitantes para navegar sem esforço pelas diferentes partes do seu site da Web. Combinamos com um design de seção de altura total. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver alguma dúvida ou sugestão, sinta-se à vontade para deixar um comentário na seção de comentários abaixo.