Transições Suaves de Rolagem

JSScript
O código é utilizado para implementar a biblioteca Lenis, que fornece transições suaves de rolagem em uma página web. Configurações específicas são definidas para a rolagem, como duração, easing, orientação, entre outras.

Como instalar

  • Copie e cole o código replicado acima dentro da seção <head> ou antes da tag de fechamento </body> de sua página WordPress ou HTML.
  • Se você estiver usando WordPress e Elementor:
    • Abra a página desejada no editor do Elementor.
    • Arraste um widget de HTML para a área de conteúdo.
    • Cole o código dentro da área de texto do widget de HTML.
    • Clique em “Atualizar” para salvar as alterações.

Explicando o código

  • O primeiro <script> tag é para incluir a biblioteca Lenis via CDN.
  • O segundo <script> bloco é onde a biblioteca Lenis é inicializada e configurada.
    • new Lenis cria uma nova instância da biblioteca Lenis.
    • Os parâmetros dentro das chaves ({}) são as opções de configuração para a rolagem suave:
      • duration: Duração da transição.
      • easing: Função de easing para a transição.
      • orientation e gestureOrientation: Orientação da rolagem (vertical neste caso).
      • smoothWheel: Suavização da rolagem do mouse.
      • wheelMultiplier: Multiplicador de velocidade para rolagem do mouse.
      • smoothTouch: Suavização da rolagem de toque.
      • touchMultiplier: Multiplicador de velocidade para rolagem de toque.
      • infinite: Rolagem infinita.
    • lenis.on('scroll', (e) => {...} é um ouvinte de evento que é disparado durante a rolagem, neste caso, ele está apenas logando o evento no console.
    • A função raf é definida e é usada para solicitar uma nova animação frame e chamar a função raf da biblioteca Lenis em cada frame.
    • requestAnimationFrame(raf) inicia o ciclo de animação.

Códigos

JS

				
					
2
				
			
				
					
    const lenis = new Lenis({
      duration: 1.2,
      easing: (t) =&gt; Math.min(1, 1.001 - Math.pow(2, -10 * t)),
      orientation: 'vertical',
      gestureOrientation: 'vertical',
      smoothWheel: true,
      wheelMultiplier: 1,
      smoothTouch: false,
      touchMultiplier: 2,
      infinite: false,
    });

    lenis.on('scroll', (e) =&gt; {
      console.log(e);
    });

    function raf(time) {
      lenis.raf(time);
      requestAnimationFrame(raf);
    }

    requestAnimationFrame(raf);
2

				
			

Relacionados

teste

teste
Script

Desabilitar Ferramentas de Desenvolvedor no Navegador

Este código JavaScript desabilita automaticamente as ferramentas de...
JSScript

Transições Suaves de Rolagem

O código é utilizado para implementar a biblioteca...
JSScript

Fale com a Lab1