Aguarde...

21 de janeiro de 2020

Como animar facilmente elementos do site em rolagem usando a Biblioteca AOS gratuita

Como animar facilmente elementos do site em rolagem usando a Biblioteca AOS gratuita

As animações on-scroll podem adicionar um efeito bastante elegante ao seu site. Um pouco de polimento animado pode ajudar muito a tornar seu site completo e completo. Com JavaScript e CSS, você pode fazer com que os elementos desbotem, deslizem ou girem conforme aparecem quando você rola uma página para baixo .

E você nem precisa codificar tudo sozinho! Graças à Biblioteca AOS gratuita , embelezar seu site é tão simples quanto adicionar um script. Basta usar uma CDN ou um gerenciador de pacotes para instalar os arquivos JavaScript e CSS e inserir algumas linhas de código. Então criar animações será uma brisa.

Mostraremos como configurar a biblioteca do AOS aqui, além de alguns exemplos impressionantes de experimentos do AOS em ação.

Configurando o AOS

A instalação do AOS no seu site é um processo simples se você estiver usando uma CDN ou gerenciador de pacotes, que hospeda todos os arquivos e os instala corretamente. Se você não quiser fazer isso, precisará baixar os arquivos e configurá-los por conta própria.

Com um gerenciador de pacotes, tudo que você precisa fazer é inserir um código na linha de comando / terminal do servidor em que o instalou. O npm é uma solução popular e também vem automaticamente com o Node.js. Basta usar este comando:

npm install --save aos@next

Há também o Bower , que requer npm. Embora seja uma ferramenta obsoleta, ainda é mantida e é usada por muitos. Se você o tiver instalado, inicie este script:

bower install aos --save

Finalmente, há o Yarn , uma alternativa popular ao Bower. Este é o código que você precisará:

yarn add aos@next

Se você preferir usar uma CDN, esses scripts instalarão os arquivos e as folhas de estilo necessárias para começar. Certifique-se de incluir os dois ou não funcionará corretamente.

Os scripts CSS:

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

Os scripts JS:

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

Qualquer que seja o método usado, a última etapa é inicializar o AOS com este código e concluir o processo de instalação:

<script>
AOS.init();
</script>

Então é só uma questão de criar as animações! Confira esta tabela de controles de animação e essas animações predefinidas que você pode usar. Cabe a você criar os efeitos perfeitos que se encaixam no seu site exclusivo. Se você ficar preso, tente este tutorial detalhado, escrito pelo desenvolvedor. Tem muitos exemplos úteis.

Experiências e exemplos de AOS

A melhor maneira de aprender uma nova biblioteca é vendo o código em ação, e é por isso que sites como o CodePen são tão valiosos. Confira os trechos abaixo e você poderá ver o JavaScript AOS funcionando ao lado da saída. Você pode até ajustar o código em tempo real. Então use o conhecimento que você ganha para criar suas próprias animações incríveis!

Modelo

Biblioteca do AOS Animate On Scroll

AOS – animações

AOS – âncora

AOS – âncora e colocação de âncora

AOS – animações personalizadas

Exemplos de animação em rolagem – Desativar animações

AOS JS

Filme

Efeitos de rolagem simplificados

Graças a bibliotecas JavaScript como o AOS, a criação de sites com belas animações não é um grande negócio. Pode demorar um pouco para aprender os meandros de uma biblioteca, especialmente se você é iniciante, mas torna todo o processo muito mais acessível para novos desenvolvedores da web. E isso significa que você não precisa criá-lo do zero.

Se você estiver procurando por uma biblioteca que facilite a implementação de efeitos de rolagem elegantes , definitivamente tente o AOS. É simples de instalar e ainda mais fácil de aprender, para que você possa ter animações on-scroll prontas para funcionar.

Postado em Blog
Escreva um comentário