post

Efeito Rolagem Suave (Smooth Scroll) no Site com Biblioteca JavaScript LocomotiveScroll

Publicado em: 11/05/2024 / Atualizado em: 11/05/2024

Categorias: BlogGitHubJavaScript (JS)JS

LocomotiveScroll é uma biblioteca JavaScript que transforma a rolagem de seu site em uma experiência suave e atraente. Esta ferramenta se destaca por sua facilidade de instalação e eficácia imediata em melhorar a rolagem do seu site.

Segue aqui uma página demonstrativa utilizando o efeito de rolagem suave da biblioteca: https://locomotivemtl.github.io/locomotive-scroll/

Para começar a usar o LocomotiveScroll, você precisa de apenas alguns passos simples:

Adição do Arquivo JS via CDN: Primeiro, incorpore o link do arquivo JavaScript da LocomotiveScroll em sua página. Isso pode ser feito facilmente através de uma CDN (Content Delivery Network), garantindo que o arquivo seja carregado rapidamente e de forma confiável em seu site.

<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@beta/bundled/locomotive-scroll.min.js"></script>

Configuração do JavaScript: Após adicionar o arquivo JS, insira um trecho de código JavaScript para ativar o efeito de rolagem suave. Este código configura a biblioteca para funcionar de acordo com as especificidades do seu site, permitindo personalizar a velocidade e o comportamento da rolagem.

<script>
    (function () {
        const locomotiveScroll = new LocomotiveScroll({
          lenisOptions: {
            wrapper: window,
            content: document.documentElement,
            lerp: 0.1,
            duration: 1.2,
            orientation: 'vertical',
            gestureOrientation: 'vertical',
            smoothWheel: true,
            smoothTouch: true,
            wheelMultiplier: 1,
            touchMultiplier: 2,
            normalizeWheel: true,
            easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
          },
        });
    })();
</script>

O uso de LocomotiveScroll no seu site não só melhora a experiência visual para os usuários, mas também pode contribuir para uma navegação mais intuitiva e agradável. Ao oferecer uma rolagem suave e controlada, você minimiza as distrações e foca a atenção do usuário no conteúdo essencial.

Acessando a página do Github do projeto você pode ver mais informações sobre: https://github.com/locomotivemtl/locomotive-scroll

Publicações recomendadas:

Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News

Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/5124

ID de Referência: 5124

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários