Bibliotecas JavaScript para efeitos de rolagem legal
Um design de site ganha vida com animações bem executadas. Se você está procurando as bibliotecas adequadas para adicionar efeitos ao seu projeto, aqui eu fiz uma lista de algumas das bibliotecas que você pode usar para dar efeitos com base no evento de rolagem.
Quando um usuário rola sua página, a ação pode ser projetado para acionar uma variedade de opções de animação como efeitos de desvanecimento, desfoque, 3D, paralaxe e muito mais. Existem 25 bibliotecas de JS aqui que podem ajudá-lo a obter esse tipo de resposta no design do seu site.
Pergaminho Revele
Uma biblioteca que facilita a adição de animações de rolagem para web e dispositivos móveis. Você pode configurar a atenuação personalizada, rotações em 3D, duração e muitos parâmetros mor para o elemento que deseja animar.
Dependências: none | Tamanho: 2,9 kb | Licença: MIT
Aniview
Um plug-in que funciona em conjunto com o Animate.CSS para ativar as animações apenas quando o elemento entra na viewport.
Dependências: jQuery | Tamanho: 1kb | Licença: N / D
Desaparecer em vista
Um plug-in que adiciona o efeito de aparecimento / desaparecimento aos elementos quando eles entram ou saem de viewports predeterminados.
Dependências: jQuery | Tamanho: 3,81kb | Licença: N / D
UAU
WOW irá revelar Animate.css animações no evento de rolagem. Você pode configurar a duração da animação, atrasos, offsets e iterações diretamente da marcação HTML, e então apenas chamar a classe do elemento de JS.
Dependências: Animate.css | Tamanho: 8,23kb | Licença: MIT
ScrollMagic
Este plugin mostrará um efeito 'Mágico' quando um usuário rola a página. É perfeito para animar, fixar um elemento ou alternar a classe CSS, tudo com base na posição de rolagem. O ScrollMagic pode trabalhar em conjunto com o GSAP e o VelocityJS na criação de uma cena de animação. Veja as demonstrações completas aqui.
Dependências: jQuery, GSAP, Velocity.js | Tamanho: 16,9 kb | Licença: MIT
jcrabilidade
O jScrollability permite criar páginas da Web únicas com animações complexas baseadas em rolagem. Após o usuário sroll, o elemento será animado com base nas posições de rolagem. As animações são executadas com base na profundidade da rolagem e, é claro, você pode definir o início e o fim da animação.
Dependências: jQuery | Tamanho: 1,86kb | Licença: MIT
pushIn.js
Uma biblioteca simples para adicionar o efeito dolly-in ou push-in a qualquer elemento que funcione quando um usuário rola a página. É fácil de implementar: basta adicionar os parâmetros start, stop e speed para Parâmetros de dados para o seu elemento HTML.
Dependências: Nenhum | Tamanho: 4,94 kb | Licença: N / D
Scrollissimo
Esta é uma biblioteca JS para adicionar animações controladas por rolagem suaves. Ele utiliza as interpolações e cronologias do Greensock para gerar animações mais suaves.
Dependências: GreenShock TweenLite / TweenMax | Tamanho: 2,94 kb | Licença: N / D
Plugin de rolagem de animação jQuery
Este é um plugin jQuery para adicionar animação acionada por viewport usando Greensock. Facilita a animação de elementos com atenuação, transformação, escala, rotação e animações em 3D.
Dependências: jQuery, GreenShock | Tamanho: 14kb | Licença: GNU GPL
Circlr
O Circlr permite criar a animação de rotação para um elemento, acionada por rolagem, eventos do mouse ou eventos de toque. É perfeito para fazer uma vitrine de um produto que pode ser visto de todos os 360 graus, ativado por rolagem do usuário.
Dependências: Nenhum | Tamanho: 6,05kb | Licença: MIT
Scrollimator
O Scrollimator mostrará a posição e o progresso da rolagem, além de retornar valores que podem ser usados para alterar as interpolações anexadas ao comportamento de rolagem do usuário. Suporta rolagem vertical e horizontal.
Dependências: Nenhum | Tamanho: 37,7 kb | Licença: N / D
Crossfade
Crossfade é um plugin para adicionar o efeito crossfade a uma imagem. O efeito borrado continuará enquanto o usuário rola mais abaixo.
Dependências: jQuery | Tamanho: 3,19 kb | Licença: MIT
Efeito de rolagem de página
Este é uma biblioteca para efeitos de rolagem de página experimental criados pela CodyHouse. Utiliza velocitey.js animações.
Dependências: jQuery, Velocity.js | Tamanho: 17,6 kb | Licença: N / D
jquery.parallax-scroll
Essa biblioteca permite adicionar um efeito de paralaxe suave à rolagem vertical da página. Basta importar jQuery e jquery.easing.1.3.js, depois adicionar o 'parallax de dados' atributos e patametros opcionais ao seu elemento para personalizar o efeito.
Dependências: jQuery, jQuery.easing | Tamanho: 8,72kb | Licença: GNU GPL
parallax.js
Parallax.js é um plugin simples que adiciona o efeito de rolagem parallax, inspirado no site do Spotify.
Dependências: jQuery | Tamanho: 6,63 kb | Licença: MIT
Enllax
Enllax é uma biblioteca super leve para uso na aplicação do efeito paralaxe em qualquer elemento de rolagem. Você pode definir elementos de plano de fundo ou de primeiro plano para ter efeito de ethis. Funciona para rolagem vertical e horizontal.
Dependências: jQuery | Tamanho: 1.53kb | Licença: MIT
Desfoque no pergaminho
Essa biblioteca ajuda você a adicionar o efeito de desfoque a uma imagem, que será acionada pela rolagem da página. Quanto mais você rolar a página, mais borrada a imagem fica.
Dependências: Nenhum | Tamanho: 1,1kb | Licença: N / D
boxLoader
boxLoader é um plugin simples para carregar elementos na rolagem de páginas. O parâmetro que você deve definir são as direções (x ou y), posição na porcentagem, efeito e também duração.
Dependências: jQuery | Tamanho: 3,42kb | Licença: N / D
Rolo de página inclinada
Enquanto um usuário rola uma página, este plugin revelará um incrível efeito 3D inclinado no elemento que você configurou.
Dependências: jQuery | Tamanho: 1,5kb | Licença: GNU GPL
AhRelax
O AhRelax fornece uma maneira de criar animações rápidas baseadas em rolagem. É leve e também tem ótimo desempenho. Você pode ler mais sobre isso aqui.
Dependências: jQuery | Tamanho: 1,6 kb | Licença: MIT
Pergaminho Extravagante
Se você já viu o efeito de rolagem de estouro no Android ou iOS, com este plug-in, você pode aplicar isso ao seu site. Você pode adicionar uma animação, seja uma devolução ou brilho, quando um usuário alcança a parte superior / inferior da página.
Dependências: jQuery | Tamanho: 2,64 kb | Licença: GNU GPL
Rolagem de imagem paralaxe
Este plugin fará com que os elementos flutuem e se movam enquanto um usuário rola para baixo ou para cima a página.
Dependências: jQuery | Tamanho: 8,69kb | Licença: MIT
Rlsmooth
Este é um pequeno plugin para criar o efeito de fluxo quando um usuário navega pela página. Existem três efeitos disponíveis: slide, fade e show.
Dependências: jQuery | Tamanho: 1,95kb | Licença: MIT
Pergaminho
Adiciona efeitos simples à rolagem de páginas, como dimensionar, girar, traduzir e alterar a opacidade dos elementos. É fácil de configurar: basta importar o jQuery, este plugin, e definir os parâmetros de animação na marcação do elemento..
Dependências: jQuery | Tamanho: 5,45kb | Licença: N / D
Parallax ImageScroll
Este plugin permite que você dê um efeito de paralaxe a qualquer imagem em sua página. Faça uso do CSS3 Transform para fazer o efeito funcionar. Este plugin tem suporte para jQuery e AMD.
Dependências: jQuery | Tamanho: 8,01kb | Licença: MIT
