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.
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.
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
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;
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
Adicionar linha 1
Estrutura da coluna
Continue adicionando uma nova linha à seção usando a seguinte estrutura de colunas:
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%
Espaçamento
Também estamos removendo o preenchimento superior e inferior padrão da seção.
- Preenchimento superior: 0px
- Preenchimento inferior: 0px
Posição
E reposicionaremos a linha de acordo:
- Posição: Absoluto
- Localização: Bottom Center
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.
Cor de fundo
Em seguida, altere a cor do plano de fundo.
- Cor de fundo: # ffee00
Configurações de texto
Também removeremos a altura da linha de texto do módulo.
- Altura da linha de texto: 1em
Dimensionamento
Em seguida, vamos às configurações de tamanho e alteramos a largura.
- Largura: 30%
Espaçamento
Transformaremos o módulo em um quadrado adicionando alguns preenchimentos superiores também.
- Estofamento superior: 30%
Adicionar linha 2
Estrutura da coluna
Na próxima linha. Use a seguinte estrutura de coluna:
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%
espaçamento
Em seguida, adicione uma margem superior personalizada em diferentes tamanhos de tela.
- Margem superior: 20vh (desktop), 5vw (tablet e telefone)
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
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.
dimensionamento
Forçaremos a largura total do módulo.
- Forçar largura total: Sim
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.
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)
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.
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
espaçamento
E adicione margens superior e inferior personalizadas às configurações de espaçamento.
- Margem superior: 2vw
- Margem inferior: 2vw
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.
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
- Fonte do botão: Anton
- Estilo da fonte do botão: Maiúsculas
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)
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
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
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
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
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
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.
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.
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.