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.