bibliotecas JavaScript para efeitos de rolagem Cool

um projeto de site ganha vida com animação bem executada. 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 baseados no evento scroll.

quando um usuário se desloca pela sua página web, a ação pode ser projetada para desencadear uma variedade de opções de animação, tais como efeitos de desvanecimento, borrão, 3D, paralaxe, e muito mais. Existem 25 bibliotecas JS aqui que podem ajudá-lo a alcançar esse tipo de resposta em seu projeto de site.

Read more: 15 examples of scrolling done right in website design

Scroll Reveal

a library that makes it easy to add scroll animation for both web and mobile. Você pode definir suavização personalizada, rotações 3D, duração e muitos parâmetros mor para o elemento que você deseja animar.

dependências: nenhuma / Tamanho: 2,9 kb / Licence: MIT

Aniview

um plugin que funciona em conjunto com o Animate.CSS para activar as animações apenas quando o seu elemento entrar em viewport.

Dependências: http: | / Tamanho: 1kb | Licença: N/A

Fade Para o modo de Exibição

Um plugin que adiciona o fade in/out efeito de elementos quando entrar ou sair predeterminado viewports.

dependências: jQuery / Size: 3.81 kb / Licence: N / A

WOW

WOW will reveal Animate.CSS animations upon scroll event. Você pode configurar a duração da animação, atrasos, compensações e iterações a partir da marcação HTML, em seguida, basta chamar a classe do elemento de JS.

Dependências: Animate.css / Size: 8.23 kb / Licence: MIT

ScrollMagic

este ‘ plugin ‘irá mostrar um efeito’ mágico ‘ quando um usuário scrolls a página. É perfeito para animar, fixar um elemento, ou alternar a classe CSS, tudo baseado na posição de deslocamento. ScrollMagic pode trabalhar em conjunto com GSAP e VelocityJS na criação de uma cena de animação. Veja as demonstrações completas aqui.

dependências: jQuery, GSAP, velocidade.js / Size: 16.9 kb / Licence: MIT

jScrollability

jScrollability lets you create single web pages with complex scroll-based animations. Após o posicionamento do usuário, o elemento será animado com base nas posições de deslocamento. Animações são executadas com base na profundidade de deslocamento, e é claro que você pode definir o início e o fim da animação.

dependências: jQuery / Size: 1.86 kb / Licence: MIT

pushIn.js

a simple library to add the dolly-in or push-in effect to any element that works when a user scrolls through the page. É fácil de implementar: basta adicionar os parâmetros de início, paragem e velocidade para data-params ao seu elemento HTML.

dependências: nenhuma / tamanho: 4.94 kb / Licence: N / A

Scrollissimo

this is a JS library to add smooth scroll-controlled animations. Ele utiliza os tweens e cronologias dos Greensock para gerar animações mais suaves.

Dependências: Greenshock TweenLite/TweenMax | Size: 2.94kb | Licença: N/A

jQuery Animação de Deslocamento Plugin

Este é um plugin jQuery para adicionar visor acionado animação usando Greensock. Torna mais fácil animar elementos com animações 3D, transformadoras, de escala, de rotação e 3D.

Dependências: jQuery, GreenShock | Tamanho: 14kb | Licença: GNU GPL

Circlr

Circlr permite que você criar a animação de rotação de um elemento, provocada pelo deslocamento, eventos de mouse ou eventos de toque. É perfeito para fazer uma vitrine de um produto que pode ser visto de todos os 360 graus, ativado pelo pergaminho do Usuário.

Dependências: nenhum | Tamanho: 6.05 kb | Licença: MIT

Scrollimator

Scrollimator irá mostrar-lhe a posição e o deslocamento de progresso e valores de retorno que você pode usar para alterar animações tween anexado ao usuário o comportamento de rolagem. Ele suporta deslocamento vertical e horizontal.

dependências: nenhuma / Tamanho: 37,7 kb / Licence: N/A

Crossfade

Crossfade é um plugin para adicionar o efeito crossfade para uma imagem. O efeito de borrão continuará como um scrolls do usuário mais para baixo.

dependências: jQuery / Size: 3.19 kb/ Licence: MIT

Page Scroll Effect

This one is a library for experimental page scroll effects created by CodyHouse. Utiliza o velocitey.js animations.

dependências: jQuery, Velocity.js | Size: 17.6 kb/Licence: N / A

jquery.parallax-scroll

esta biblioteca permite-lhe adicionar um efeito de paralaxe suave ao deslocamento vertical da página. Só importa jQuery e jquery.flexibilizacao.1.3.js, em seguida, adicione o atributo 'data-parallax' e os patametros opcionais ao seu elemento para personalizar o efeito.

dependências: jQuery, jQuery.a flexibilização | Tamanho: 8.72 kb | Licença: GNU GPL

paralaxe.js

Parallax.js é um plugin simples que adiciona o efeito de rolagem paralaxe, inspirado no site Spotify.

dependências: jQuery / Size: 6,63 kb / Licence: MIT

Enllax

Enllax is a super lightweight library for use on applying the parallax effect to any scrolling element. Você pode definir elementos de fundo ou de primeiro plano para ter efeito ethis. Ele funciona tanto para deslocamento vertical e horizontal.

Dependências: http: | / Tamanho: 1.53 kb | Licença: MIT

Desfoque de deslocamento

Esta biblioteca de ajuda você a adicionar o efeito de borrão a uma imagem, que será acionado pelo rolagem de página. Quanto mais fundo desligas a Página, mais desfocada fica a imagem.

Dependências: nenhum | Tamanho: 1.1 kb | Licença: N/A

boxLoader

boxLoader é um plugin simples para carregar elementos sobre a rolagem de página. O parâmetro que você deve definir são as direções (x ou y), posição em percentagem, efeito e também Duração.

dependências: jQuery / Size: 3.42 kb / Licence: N/A

Inclinado Página de Deslocamento

Como um utilizador se desloca através de uma página, este plugin irá revelar um 3D impressionante inclinado efeito para o elemento que você configurar.

Dependências: http: | / Tamanho: 1,5 kb | Licença: GNU GPL

AhRelax

AhRelax fornece uma maneira rápida de deslocamento baseado em animações. É leve e também tem um grande desempenho. Você pode ler mais sobre isso aqui.

dependências: jQuery / Size: 1.6 kb / Licence: MIT

Fantasia de Deslocamento

Se você já viu o estouro efeito de rolagem no Android ou iOS, com este plugin você pode agora aplicar isto a seu site. Você pode adicionar uma animação, ou um salto ou brilho, quando um usuário chega ao topo/fundo da página.

dependências: jQuery / Size: 2.64 kb / Licence: GNU GPL

Parallax image scroll

este ‘plugin’ fará com que os elementos flutuem e se movam como um Pergaminho para baixo ou para cima da página.

dependências: jQuery / Size: 8,69 kb / Licence: MIT

Rlsmooth

Este é um pequeno plugin para criar o fluxo efeito quando um usuário scolls para cima ou para baixo a página. Existem três efeitos disponíveis: slide, fade e show.

Dependências: http: | / Tamanho: 1.95 kb | Licença: MIT

Scrollme

Adiciona efeitos simples para rolagem de página, tais como escala, rotação, 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 / Size: 5.45 kb / Licence: N / A

Parallax ImageScroll

este plugin permite – lhe dar um efeito de paralaxe a qualquer imagem na sua página. Ele faz uso da transformação CSS3 para fazer o efeito funcionar. Este plugin tem suporte para jQuery e AMD.

dependências: jQuery / Size: 8.01 kb/ Licence: MIT