Visão geral da tecnologia de rolagem

As animações relacionadas à rolagem de páginas da web existem há muitos anos. Recentemente, essas animações se tornaram mais comuns. Talvez parte disso seja porque os dispositivos usados ​​para navegar na Internet se tornaram mais poderosos. Esses dispositivos são capazes de manipular e exibir mais efeitos visuais do que antes. Existem muitas tecnologias relacionadas à rolagem. O objetivo deste artigo é fornecer uma visão geral dessas tecnologias e ferramentas que ajudarão você a escolher e criar o que você precisa em cada situação específica. Eu dividiria as tecnologias de rolagem em duas grandes categorias. O primeiro inclui tecnologias para implementar mecanismos de rolagem específicos e o segundo inclui tecnologias de rolagem de uso geral.

Tecnologias para a implementação de mecanismos específicos de rolagem

Existem vários efeitos simples de rolagem padrão em CSS suportados por navegadores modernos. Em alguns casos, sua aplicação pode ser suficiente para atender às necessidades específicas de um projeto.

Posição da propriedade SSCSS: pegajosa

Se você precisar de um elemento para não rolar junto com o restante do conteúdo da página, ao estilizar esse elemento, basta aplicar a propriedade position: sticky. Esse é um truque simples e direto; seu suporte é incorporado aos navegadores modernos. Mas, para que isso funcione no IE e em alguns navegadores móveis, você precisa de um polyfill. Se você está interessado neste tópico, dê uma olhada neste material.





O elemento azul “repousa” na parte superior do contêiner e não rola junto com o restante dos elementos.Aqui



está uma demonstração dessa rolagem.

Efeito effectPallallax

O efeito de paralaxe não é, antes, uma tecnologia especial, mas uma técnica técnica especial. Porém, seja como for, esse efeito pode ser muito útil nos casos em que você precisa rolar partes diferentes da página em velocidades diferentes. Esta técnica está bem descrita neste material. Existem muitos exemplos de sua implementação. Por exemplo - este . Para mim, a principal desvantagem dessa técnica é que é difícil entender quais valores, que dão o efeito de paralaxe correto, devem ser usados ​​para ajustar perspectivas e transformações.





Efeito paralaxe: os elementos se movem em velocidades diferentes.



Aqui está uma demonstração do efeito de paralaxe.

▍ Role para pontos específicos

O uso da rolagem com pontos de ancoragem permite que o navegador ajuste automaticamente a posição dos elementos, movendo-os para uma posição específica após o usuário concluir a operação de rolagem normal. Isso pode ser útil nos casos em que é necessário que, após concluir a rolagem, um determinado elemento esteja inteiramente no campo de visão do usuário. No entanto, a API ainda é instável , portanto, tente usar as implementações mais recentes e tenha cuidado ao usar essa abordagem para rolar a produção. Aqui está um bom artigo sobre este tópico.





Se o usuário rolar o conteúdo para mover o elemento além da borda superior do contêiner, o navegador alterará automaticamente a posição do elemento para que fique visível na íntegra.Aqui



está uma demonstração de rolagem com pontos de ancoragem.

Rolagem suave

A rolagem suave é suportada pelo navegador ao rolar a página para uma seção específica usando o método window.scrollTo () em JavaScript, ou mesmo usando a propriedade CSS de comportamento de rolagem . Atualmente, são necessárias bibliotecas JavaScript especiais para implementar a rolagem suave com suavização de serrilhado dos movimentos da roda do mouse. Porém, ao usar essas bibliotecas, você precisa garantir a interação normal com outras tecnologias de rolagem. Além disso, o uso de rolagem suave nem sempre é uma boa ideia.

Tecnologias gerais de rolagem

Atualmente, não há como, usando apenas CSS, executar animações de rolagem de uso geral com base na posição de rolagem (embora exista uma sugestão segundo a qual em um futuro distante poderemos ter algumas animações baseadas em tecnologias de rolagem de uso geral) . Como resultado, se você deseja animar elementos durante a rolagem, é necessário, no mínimo, usar uma certa quantidade de código JavaScript para obter o efeito desejado. Existem dois métodos para usar JavaScript para animar elementos durante a rolagem. O primeiro é usar a API Intersection Observer, o segundo é manipular o evento scroll.

▍Usando a API Intersection Observer

A API IntersectionObserver permite resolver com êxito várias tarefas relacionadas à rolagem, se tudo o que for necessário para iniciar a animação for saber se um elemento está visível na janela de exibição e qual parte do elemento está visível. . Isso torna a API IntersectionObserver uma ótima ferramenta para acionar animações que acompanham a aparência de um elemento na tela. Mas, mesmo assim, alguns efeitos são muito difíceis (embora possíveis) de implementar usando essa API. Por exemplo, este é o lançamento de diferentes animações, dependendo da direção do movimento de um elemento. Além disso, essa API não é particularmente útil em situações em que, ao rolar a rolagem, é necessário iniciar a animação quando o elemento está em algum lugar no meio da janela de exibição, ou seja, ela não aparece na janela de exibição e não desaparece dela.

SingUsando o evento de rolagem

Para aqueles que, para a implementação da animação durante a rolagem, usam o evento scroll, há grandes oportunidades. Essa técnica permite, durante a rolagem, afetar o elemento em qualquer posição do elemento em relação às bordas da viewport. Usando o evento scroll, você pode definir com precisão, de acordo com as necessidades do projeto, as posições do início e do fim da animação.



Diante disso, deve-se notar que essa abordagem da animação de rolagem pode criar uma carga significativa no sistema. Isso acontece se o desenvolvedor não se importa com o desempenho e não limita a frequência do processamento de eventos scroll. Além disso, à disposição do programador que decide usar o eventoscroll, não haverá API conveniente que permita implementar vários scripts de rolagem. É por isso que muitas vezes, em vez de implementar mecanismos de manipulação de eventos scroll, faz sentido usar uma biblioteca especializada, cujos autores já cuidaram do impacto no scrolldesempenho da manipulação de eventos e da API. Algumas dessas bibliotecas podem até ajudar o desenvolvedor em caso de problemas com o tamanho dos elementos.

Ferramentas de rolagem de uso geral

Existem várias bibliotecas poderosas para rolagem, que visam dar ao desenvolvedor controle total sobre as animações executadas ao rolar as páginas, bem como tornar a vida do desenvolvedor o máximo possível, sem forçá-lo a fazer cálculos complexos por conta própria.

▍ScrollMagic

A biblioteca ScrollMagic fornece uma API relativamente simples que permite criar vários efeitos de rolagem. Essa biblioteca pode funcionar com várias bibliotecas de animação, como GSAP e Velocity.js . É verdade que nos últimos anos essa biblioteca não é bem suportada. Isso levou à criação da biblioteca ScrollScene.

▍ScrollScene

O ScrollScene é essencialmente um invólucro que visa melhorar a usabilidade da biblioteca ScrollMagic e / ou da API IntersectionObserver. Ele usa sua própria versão do ScrollMagic, que possui um suporte melhor que a versão regular da biblioteca. Existem recursos adicionais, como a reprodução de vídeo e pontos de interrupção de suporte que afetam a animação. Além disso, esta biblioteca usa o GSAP.

▍ScrollTrigger

A biblioteca ScrollTrigger é o plugin oficial do GreenSock para o GSAP. Esta biblioteca possui um grande conjunto de recursos, sua API me parece ser a API mais simples das bibliotecas de rolagem existentes. Usando esta biblioteca, você tem controle total sobre onde a animação de rolagem começa e termina, você pode animar o que quiser enquanto rola (WebGL, canvas, SVG, DOM), pode fixar elementos enquanto a animação está em execução. Os recursos desta biblioteca não se limitam a isso. O GreenSock também suporta esta biblioteca e você pode obter ajuda para usá-lo nos fóruns do GreenSock.

▍Biblioteca digna de menção: Locomotive Scroll

A biblioteca Locomotive Scroll não se esforça para fornecer um conjunto tão amplo de recursos quanto as outras bibliotecas que discutimos. Seu principal objetivo é a implementação de rolagem suave. Além disso, você pode animar algumas propriedades de objetos DOM usando atributos data-*ou usar um manipulador onscrollpara animar objetos de outros tipos.

Comparação de tecnologias e ferramentas

Aqui está uma comparação das tecnologias de rolagem.





Aqui está uma comparação das bibliotecas revisadas.

Resultado

Para implementar alguns mecanismos especiais de rolagem, como fixar elementos e o efeito de paralaxe, os recursos CSS padrão podem ser suficientes. Pelo menos - isso é verdade, desde que os polyfills sejam usados ​​para navegadores que não suportam os recursos CSS correspondentes.



Eu normalmente recomendo usar a biblioteca ScrollTrigger para configurar a rolagem. Ele permite que você consiga tudo o que o CSS puro pode fazer e muito mais. Essa biblioteca cuida do suporte do navegador para determinadas tecnologias, facilita a execução de cálculos, o que permite que a pessoa que a utiliza apenas realize seus negócios.



Quais tecnologias você usa ao configurar a rolagem em seus projetos?