Para começar com o Locomotive Scroll, você deve incluir os seguintes arquivos em seu projeto:

• o locomotive-scroll.css arquivo ou sua versão minificada
• o locomotive-scroll.js arquivo ou sua versão minificada

Você pode baixá-los visitando seu repositório GitHub, usando um gerenciador de pacotes (por exemplo, npm), ou carregando os ativos necessários por meio de um CDN (por exemplo, jsDelivr). Para este tutorial, escolheremos a última opção.

Conforme discutido na introdução, para esta demonstração, além dos arquivos do Locomotive, também incorporaremos o Tailwind CSS para criar o layout da página.

Com isso em mente, se você olhar sob o Definições guia de nossa caneta de demonstração, você verá que existem dois arquivos CSS externos e um arquivo JavaScript externo.

1. Estruturando a página

Locomotive Scroll vem com vários data atributos para manipular os elementos. Usaremos muitos deles, então no final deste tutorial você terá uma boa noção do que eles fazem e como você pode usá-los.

Vamos começar especificando um elemento wrapper com o data-scroll-container atributo. Dentro dele, colocaremos as seções da página e um link de volta ao topo. Mais tarde, inicializaremos o plug-in visando esse wrapper.

Todas as seções da página terão o data-scroll-section atributo. Além disso, quase todos eles terão um id atributo. Esse atributo nos ajudará a navegar sem problemas para as seções de destino por meio do menu e dos links de volta ao topo.

Aqui está a estrutura da página inicial:

  
...
  
...
  
...
  
...
  
...
  
...
  
...
  
...
  
...
    
    
  

Neste ponto, estamos prontos para dar uma olhada nas seções importantes da página.

Seção 1

A primeira seção incluirá um título e um parágrafo.

Outra coisa importante aqui: por padrão, o link de volta ao topo não aparecerá. Enquanto rolamos:

• Se o título estiver visível, o link ficará/permanecerá invisível.
• Ele aparecerá apenas quando o título não estiver visível.

Para implementar essa funcionalidade, passaremos o data-scroll, data-scroll-repeate data-scroll-call="toggleBackToTop" atributos ao título. Vamos agora discutir um pouco mais o papel desses atributos:

• O trabalho do data-scroll atributo é verificar se o elemento está em exibição. Assim que aparecer pela primeira vez, o plugin adicionará o is-inview classe a isso. Esta classe não será mais removida. Observe também como o plugin modifica o CSS do elemento transform propriedade para aplicar os diferentes efeitos.

• O trabalho do data-scroll-repeat atributo é verificar repetidamente se o elemento estiver à vista. O plugin irá alternar o is-inview classe dependendo da posição do elemento. No nosso caso, usaremos esse atributo apenas em conjunto com o data-scroll-call atributo que precisa dele para funcionar corretamente.
• O trabalho do data-scroll-call atributo é acionar a locomotiva call evento. O valor do atributo que pode ser o que quisermos é passado como parâmetro para o callback do evento e nos permite fazer coisas quando o elemento alvo entra ou sai da viewport. É um pouco difícil de explicar com palavras, então é melhor que você veja o código JavaScript. Voltaremos a trabalhar com ele nas próximas seções. Como dito, lembre-se que vamos usá-lo junto com o data-scroll-repeat atributo.

Veja como estruturamos esta seção:

  

    
A Simple Demo With Locomotive Scroll
    
Scroll down 👇
  

Seção 2

A segunda seção incluirá os links do menu.

Para navegar sem problemas para as seções da página ao clicar em um link, temos que dar o data-scroll-to atribua aos links.

Observação: passaremos o mesmo atributo para o link back-to-top.

Lembre-se de que esse atributo não faz parte dos documentos no momento da redação deste artigo. Se você está se perguntando como eu sei sobre sua existência, a resposta é que eu o encontrei verificando o código-fonte da página do GitHub do plugin.

Como alternativa, se você não quiser usar esse atributo, poderá obter essa funcionalidade usando alguns métodos de rolagem JavaScript.

Veja como estruturamos esta seção:

Seção nº 3

A terceira seção incluirá um título e algum texto.

À medida que rolamos, fixaremos o título no topo. Mas, por quanto tempo? Bem, até passarmos pelo seu pai. Nesse ponto, o elemento desaparecerá, pois fará parte do fluxo normal de documentos.

Para implementar essa funcionalidade, atribuiremos o data-scroll, data-scroll-stickye data-scroll-target="#about" atributos ao título. Algumas notas:

• Como já sabemos, o data-scroll O atributo detectará se nosso elemento está em exibição.
• o data-scroll-sticky atributo irá torná-lo pegajoso em par com o data-scroll-target atributo.
• O valor do data-scroll-target O atributo irá determinar as posições de aderência inicial e final do elemento.

Veja como estruturamos esta seção:

  

    

      
About
      
...
    
  

Seção #4

A quarta seção incluirá duas imagens Unsplash.

À medida que rolamos, um efeito de paralaxe acontecerá. Para ser mais específico, a primeira imagem se moverá quatro vezes mais rápido que a segunda.

Para implementar essa funcionalidade, passaremos o data-scroll e data-scroll-speed atributos para as imagens. O valor do segundo atributo determinará sua velocidade de rolagem. Aqui vamos dar data-scroll-speed="4.8" para a primeira imagem e data-scroll-speed="1.2" ao segundo.

Veja como estruturamos esta seção:

Seção nº 5

A quinta seção incluirá um título e dois banners de texto explicando nossos serviços.

À medida que rolamos, vários efeitos de paralaxe ocorrerão:

• Primeiro, as letras do título se moverão em velocidades diferentes. Além disso, cada vez que aparecerem, eles receberão uma cor aleatória de uma lista de cores predefinidas.
• Em segundo lugar, os banners se moverão horizontalmente em diferentes direções.

Para implementar essa funcionalidade, faremos o seguinte:

• Atribua o data-scoll, data-scroll-repeat, data-scroll-speede data-scroll-call="randomizeTextColor" atributos às letras do título. Como queremos um efeito de paralaxe, o valor do data-scroll-speed atributo irá variar para cada letra. Lembre-se do papel do data-scroll-call atributo. Aqui estamos dizendo: à medida que as letras entram no visor e na locomotiva call evento disparar, faça alguma coisa. Se você verificar a seção JavaScript, notará que neste ponto o getRandomColor() função está disparando. Opcionalmente, aqui também podemos colocar em ação o data-scroll-delay atributo.
• Atribua o data-scroll, data-scroll-direction="horizontal", data-scroll-speede data-scroll-target="#services" atributos aos banners. o data-scroll-direction="horizontal" irá mover os elementos horizontalmente na rolagem. Em seguida, dando-lhes valores opostos para o data-scroll-speed atributo, garantimos que eles se moverão em direções diferentes (da esquerda para a direita ou da direita para a esquerda). finalmente, o data-scroll-target="#services" O atributo determinará quando as animações horizontais devem começar. Para entendê-lo, tente colocar o id de outra seção, por exemplo data-scroll-target="#office" e recarregue a página. Observe que as animações começam muito mais cedo do que deveriam.

Veja como estruturamos esta seção:

  

    S
    e
    r
    v
    i
    c
    e
    s
  
  

    

      Social Media — Email Marketing — Digital Advertising
    
  
  

    

      Web Development - Motion Design - Graphic Design
    
  

Seção nº 6

A sexta seção incluirá três estudos de caso em destaque. Cada estudo de caso consistirá em um título, uma imagem e um link para a página interna do estudo de caso.

À medida que rolamos, cada vez que o título de um estudo de caso (nome) aparece, a cor de fundo do body elemento mudará com base no valor do data-bg atributo da seção associada.

Para implementar essa funcionalidade, podemos usar novamente o call evento, que é provavelmente uma abordagem mais eficiente. Mas, vamos, desta vez, aproveitar mais um evento que a biblioteca disponibiliza, o scroll 1. Verifique o código Javascript para obter mais detalhes sobre como lidamos com esse evento.

Em relação aos atributos personalizados:

• Nós vamos dar o data-bg-color atributo para cada seção com o valor de cor desejado.
• Vamos adicionar o data-scroll e data-scroll-repeat atributos aos títulos para que essa funcionalidade seja repetida à medida que rolamos. Observe que podemos personalizar o tempo em que a biblioteca alterna o is-inview aula através do data-scroll-offset atributo.

Veja como estruturamos esta seção:

  

    

      
...
      

         
      
      ...
    
  
  

Se você precisar que a cor do corpo mude com base na visibilidade da seção e não na visibilidade do título, remova o data-scroll e data-scroll-repeat atributos dos títulos e adicioná-los às seções. Além disso, faça os ajustes necessários no código JavaScript.

Além disso, você não precisa parar apenas na cor do corpo. Dependendo do seu layout, você pode alterar a cor do texto de cada seção, adicionar animações etc.

Seção #8

A oitava seção incluirá um título de chamada para ação.

À medida que rolamos, duas coisas acontecerão:

• Primeiro, cada vez que o título aparecer, ele receberá uma cor aleatória, como no exemplo anterior.
• Em segundo lugar, vamos animar cada letra criando outro efeito de paralaxe (lerp).

Para implementar essa funcionalidade, faremos o seguinte:

• Atribua o data-scoll, data-scroll-repeate data-scroll-call="randomizeTextColor" atributos ao título. Lembre-se que já conhecemos o data-scroll-call="randomizeTextColor" atributo. É perfeitamente bom usá-lo aqui também.
• Atribua o data-scroll, data-scroll-delaye data-scroll-speed="5" atributos para cada letra. Todas as letras se moverão cinco vezes mais rápido que a rolagem normal, mas com atrasos diferentes. Por exemplo, a primeira letra terá data-scroll-delay="0.15" enquanto o segundo data-scroll-delay="0.095". Isso criará o efeito lerp/staggering. Novamente você pode ver os efeitos do lerp no exemplo de demonstração do plugin.

Veja como estruturamos esta seção:

  

    

      h
      e
      l
      l
      o
      @
      g
      e
      o
      r
      g
      e
      .
      c
      o
      m
    
  

2. Inicializando o Plugin

Já falamos sobre muitos dos recursos do plugin, mas ainda não o inicializamos. Vamos fazer isso agora.

Aqui está todo o código JavaScript necessário:

const body = document.body;
const backToTop = document.querySelector(".back-to-top");
const opacityClass = "opacity-0";
const visibilityClass = "invisible";

const scroll = new LocomotiveScroll({
  el: document.querySelector("[data-scroll-container]"),
  smooth: true,
  tablet: { smooth: true },
  smartphone: { smooth: true }
});

const arrayOfColors = [
  "#0a9396",
  "#005f73",
  "#ae2012",
  "#3d405b",
  "#003049",
  "#bc6c25",
  "#ff006e",
  "#ef476f",
  "#1982c4",
  "#ee964b",
  "#0ead69",
  "#390099",
  "#f6aa1c",
  "#54101d",
  "#2b2c28",
  "#85c7f2",
  "#e15a97",
  "#2b70e3",
  "#b36a5e"
];

function getRandomColor() {
  const arrayLength = arrayOfColors.length;
  const randomValue = Math.random() * arrayLength;
  const roundedNumber = Math.floor(randomValue);
  const color = arrayOfColors[roundedNumber];
  return color;
}

scroll.on("call", (value, way, obj) => {
  if (value === "randomizeTextColor") {
    if (way === "enter") {
      obj.el.style.color = getRandomColor();
    }
  } else if (value === "toggleBackToTop") {
    if (way === "enter") {
      backToTop.classList.add(opacityClass, visibilityClass);
    } else {
      backToTop.classList.remove(opacityClass, visibilityClass);
    }
  }
});

scroll.on("scroll", (instance) => {
  const visibleSubSectionHeading = document.querySelector(
    ".sub-section h2.is-inview"
  );

  if (visibleSubSectionHeading) {
    const parentSection = visibleSubSectionHeading.parentElement.parentElement;
    body.style.backgroundColor = parentSection.dataset.bgColor;
  } else {
    body.style.backgroundColor = "";
  }
});

Algumas notas rápidas:

• Manteremos seu comportamento suave em todos os dispositivos.
• Observe os parâmetros do call retorno de chamada do evento. O primeiro (ou seja, value) mantém os valores do data-scroll-call atributos. Usando um if condição, verificamos quais valores estão ativos a cada vez, depois se os elementos associados entram ou saem da viewport e, finalmente, executamos as ações desejadas.
• Apesar de não ser usado em nosso caso, o callback do scroll event aceita um parâmetro que fornece informações úteis. Por exemplo, quanto rolamos e quais elementos estão atualmente em exibição. Use o console do seu navegador para ver a saída desse parâmetro.

Conclusão

Parabéns, pessoal! Conseguimos construir um site de rolagem parallax graças ao Locomotive Scroll. Felizmente, este exercício revelou o poder dessa pequena biblioteca e motivou você a começar a criar efeitos de rolagem avançados sem esforço.

Aqui está um lembrete do que construímos:

Não se esqueça de dar um pouco de amor ❤️!

Antes de encerrar, deixo algumas reflexões:

• Como em toda tecnologia/ferramenta/biblioteca, a melhor maneira de aprender Locomotive Scroll é através de seus documentos. Vá em frente, verifique o exemplo publicado e use as ferramentas do seu navegador para inspecionar seu código-fonte. Além disso, verifique o repositório do GitHub em busca de problemas, quão ativo é o projeto, como outras pessoas usam a biblioteca ou apenas para tirar algumas ideias. Se você se sentir mais aventureiro, verifique o código nativo do plugin. Aqui você aprenderá coisas como quais parâmetros uma função (por exemplo, o retorno de chamada do call evento) pode aceitar, etc.
• Os efeitos de rolagem podem diminuir o desempenho de um site. Além desse fato, quanto mais complexos os efeitos, maior o risco de encontrar problemas em diferentes navegadores/dispositivos. Por exemplo, em dispositivos móveis, eu evitaria usar as animações horizontais que abordamos.
• Para efeitos de rolagem da locomotiva ainda mais poderosos, você pode combinar a rolagem da locomotiva com outras bibliotecas de animação, como GSAP e barba.js.

Você já usou Locomotive Scroll e Tailwind para construir um site de rolagem suave? Que outros plugins você tentou nessa direção?

Por último, mas não menos importante, um grande obrigado aos desenvolvedores da Locomotive por este plugin! Como sempre, muito obrigado por ler, e certifique-se de compartilhe conosco seus projetos de locomotivas!

Confira estes outros tutoriais para saber mais sobre JavaScript e rolagem: