Como rolar horizontalmente automaticamente ao rolar verticalmente com Divi e GSAP

Quanto mais você explora sites na web, mais você se depara com algumas experiências na página realmente personalizadas. Você deve estar se perguntando como obter certas funcionalidades avançadas e a resposta geralmente é esta: usando uma biblioteca JavaScript de animação. Uma biblioteca de animação popular hoje em dia é GSAP. Mas só porque você deseja usar uma Biblioteca JavaScript para algo, não significa que você também tenha que passar manualmente pela parte HTML e CSS. A Divi pode assumir a maior parte do processo de design da web; construção e design, o que deixa você com mais tempo para se concentrar na funcionalidade personalizada e na animação. No tutorial de hoje, por exemplo, vamos mostrar como rolar horizontalmente quando realmente rolar verticalmente usando Divi e GSAP. Isso resulta em um efeito de animação avançado que você pode personalizar como quiser. Você também poderá baixar o arquivo JSON gratuitamente!

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 GRATUITAMENTE

Para colocar suas mãos no layout gratuito, primeiro você precisa baixá-los 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!

Visão geral da abordagem

O que estamos usando

• Divi
• Biblioteca JavaScript GSAP
• Plugin ScrollTrigger para GSAP
• Demonstração ScrollTrigger

O que estamos criando

• Rolagem horizontal falsa ao rolar verticalmente
• Efeito de alfinete
• Fazendo o efeito funcionar em várias seções de nossa escolha (não necessariamente na página inteira)
• Uma experiência de tela horizontal sem esforço em todos os tamanhos de tela

1. Adicionar seções de espaço reservado

Adicionar Seção # 1

Comece adicionando uma primeira seção à página em que está trabalhando. Esta seção servirá como um espaço reservado para que possamos observar o efeito se encaixando.

Dimensionamento

Abra as configurações de seção e atribua uma altura às configurações de dimensionamento.

• Altura: 60vh

Clone Seção # 1

Em seguida, clone a seção de espaço reservado uma vez. Isso nos ajudará a gerar algum espaço na parte superior e inferior da nossa página, sem que faça parte da rolagem horizontal (ver visualização).

1. Projeto da seção de construção

Adicionar nova seção entre as seções

Agora que temos as duas seções de espaço reservado no lugar, é hora de criar a primeira seção que usaremos em nossa rolagem horizontal. Adicione esta seção bem entre as duas seções de espaço reservado.

Dimensionamento

Abra as configurações de seção e atribua uma altura máxima nas configurações de dimensionamento.

• Altura máxima: 100vh

Transbordamentos

Também estamos configurando o estouro vertical para automático. Isso, em combinação com a altura máxima na etapa anterior, nos ajudará a gerar automaticamente uma barra de rolagem em certos tamanhos de tela onde os elementos de seção excedem a altura da janela de visualização.

• Estouro vertical: Auto

Adicionar nova linha

Estrutura da Coluna

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

Imagem de fundo

Sem adicionar módulos ainda, abra as configurações de linha e use uma imagem de fundo.

• Tamanho da imagem de fundo: capa
• Posição da imagem de fundo: centro

Dimensionamento

Modifique as configurações de dimensionamento da linha a seguir.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura:
  • Desktop: 70%
  • Tablet e telefone: 80%

Espaçamento

Junto com as configurações de espaçamento.

• Enchimento superior:
  • Desktop: 30vh
  • Tablet e telefone: 20vh
• Preenchimento inferior: 0 px

Configurações de coluna

Em seguida, abra as configurações da coluna.

Cor de fundo

Use uma cor de fundo branca para a coluna.

• Cor de fundo: #ffffff

Espaçamento

Vá para a guia de design da coluna e aplique alguns valores de preenchimento personalizados.

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

Fronteira

Use uma borda também.

• Largura da borda: 1px
• Cor da borda: # 000000

Adicionar Módulo de Texto # 1 à Coluna

Adicionar conteúdo H4

É hora de adicionar módulos, começando com um primeiro Módulo de Texto contendo algum conteúdo H4.

Configurações de texto H4

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

• Fonte do Título 4: Código Fonte Pro
• Cor do texto do título 4: # 000000
• Tamanho do texto do título 4:
  • Desktop: 1.2vw
  • Tablet: 2,5vw
  • Telefone: 3,5vw
• Cabeçalho 4 espaçamento entre letras: 1px

Adicionar Módulo de Texto # 2 à Coluna

Adicionar conteúdo H3

Adicione outro Módulo de Texto logo abaixo do anterior e use algum conteúdo H3 na caixa de conteúdo.

Configurações de texto H3

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

• Fonte do título 3: Alata
• Tamanho do texto do título 3:
  • Desktop: 2,5vw
  • Tablet: 4vw
  • Telefone: 7vw

Adicionar Módulo de Texto # 3 à Coluna

Adicionar conteúdo

Adicione um último Módulo de Texto à coluna com algum conteúdo de descrição de sua escolha.

Configurações de texto

Altere as configurações de texto do módulo de acordo:

• Fonte do Texto: Código Fonte Pro
• Tamanho do texto:
  • Desktop: 0.8vw
  • Tablet: 2vw
  • Telefone: 3vw
• Altura da linha de texto: 1,5em

Dimensionamento

Altere as configurações de dimensionamento a seguir.

• Largura:
  • Desktop: 67%
  • Tablet e telefone: 100%

Espaçamento

E conclua as configurações do módulo aplicando alguns valores de preenchimento responsivos às configurações de espaçamento.

• Enchimento superior:
  • Desktop: 3vh
  • Tablet e telefone: 5vh
• Preenchimento inferior:
  • Desktop: 3vh
  • Tablet e telefone: 5vh

Adicionar Módulo de Botão à Coluna

Adicionar cópia

O último módulo de que precisamos para completar o design da linha é um Módulo de Botão. Adicione 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 de acordo:

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão:
  • Desktop: 0.8vw
  • Tablet: 2vw
  • Telefone: 3vw
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # 000000
• Largura da borda do botão: 0 px
• Raio da borda do botão: 0 px
• Fonte do botão: Código-fonte Pro
• Estilo da fonte do botão: maiúscula

Espaçamento

Adicione alguns valores de preenchimento personalizados a seguir.

• Enchimento superior: 15px
• Preenchimento inferior: 15 px
• Preenchimento esquerdo: 50 px
• Preenchimento direito: 50 px

Posição

E reposicione o módulo na guia avançada.

• Posição: Absoluta
• Localização: canto esquerdo inferior
• Deslocamento vertical: -5%
• Deslocamento horizontal: 5%

2. Seção de Reutilização

Clonar seção duas vezes

Depois de concluir a primeira seção, você pode cloná-la duas vezes.

Alterar imagem e copiar e link

Certifique-se de alterar a imagem, a cópia e o link em cada seção duplicada.

2. Adicionar funcionalidade

Adicionar classe CSS a cada seção que deseja incluir na rolagem horizontal

Agora que temos todos os elementos no lugar, podemos começar a nos concentrar na funcionalidade de tudo isso. A primeira etapa para obter o resultado é atribuir uma classe CSS personalizada a cada seção que você deseja que faça parte da rolagem horizontal. Nesse caso, isso significa as três seções entre as seções de espaço reservado.

• Classe CSS: seção horizontal

Adicionar novo módulo de código em algum lugar dentro da página

Em seguida, adicione um Módulo de Código à página. Isso pode ser em qualquer lugar que você quiser.

Adicione bibliotecas GSAP e ScrollTrigger primeiro

Copie e cole as bibliotecas GSAP e ScrollTrigger dentro do Módulo de Código. Use tags de script para isso com as seguintes fontes:

src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"

Adicionar novas tags de script para código personalizado

Logo abaixo das tags de script da biblioteca, adicionaremos algumas novas tags de script.

Adicionar código JS

Prepare-se para o uso de JQuery

Dentro dessas tags de script, começaremos carregando o JQuery.

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

Registrar o plug-in ScrollTrigger

Em seguida, registraremos o plugin ScrollTrigger.

gsap.registerPlugin(ScrollTrigger);

Envolva todas as seções relevantes em uma nova div

Também estamos colocando cada uma das seções relevantes dentro de um novo div usando as seguintes linhas de código:

var allSections = $('.horizontal-section');
allSections.wrapAll('<div class="horizontal-container"/>');  

Criar novo GSAP Tween com ScrollTrigger

Para fazer a falsa rolagem horizontal funcionar, vamos usar uma nova interpolação com um gatilho de rolagem. O código que faz isso acontecer é o seguinte:

gsap.to(allSections, {
  xPercent: -100 * (allSections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".horizontal-container",
    pin: true,
    start: "top top",
    scrub: 1,
    snap: false,
    // base vertical scrolling on how wide the container is so it feels more natural.
    end: () => "+=" + document.querySelector(".horizontal-container").offsetWidth
  }
});

Adicionar tags de estilo para código CSS personalizado

A seguir, adicionaremos algumas tags de estilo ao nosso Módulo de código.

Insira o código CSS entre as tags de estilo

E concluiremos o tutorial e a funcionalidade adicionando as seguintes linhas de código CSS entre as tags de estilo:

.horizontal-container {
width: 300%;
height: 100%;
display: flex;
flex-wrap: nowrap;
max-width: none;
}

#page-container {
overflow: hidden;
}

.horizontal-section {
width: 100%;
will-change: transform;
}

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

Neste post, mostramos como ir além do seu site com Divi e GSAP. Mais especificamente, mostramos como rolar horizontalmente quando realmente rolar verticalmente em sua página. Este é um tipo de animação personalizado que você pode ter encontrado em um determinado ponto e se perguntou como poderia fazer isso com o DIvi. Você também conseguiu baixar o arquivo JSON gratuitamente! 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.