Jack Hood
0 
1566
44
Os sites de rolagem longa se tornaram uma tendência realmente comum do design da web. Um dos subtipos mais legais disso são os sites de rolagem de paralaxe, onde as imagens se movem para produzir um efeito de paralaxe. À medida que o usuário rola a página, as animações são acionadas e, em geral, dá uma nova aparência a qualquer site, se implementado corretamente.
A criação de um site de rolagem de paralaxe costuma ser entediante, pois requer conhecimento aprofundado de CSS, Javascript e bom design da web para ser realizado. Aqui está uma lista dos Melhores plugins de rolagem de paralaxe que não apenas facilitam a criação de sites de rolagem de paralaxe, mas também possuem uma biblioteca de efeitos de paralaxe bem dotada, para que se torne mais fácil e rápido o desenvolvimento de uma página da web bonita.
AVISO LEGAL: Antes de começar, observe que, para usar esses plugins, é necessário algum conhecimento de tecnologias da web (HTML / CSS / Javascript). A maioria dos plugins listados utiliza jquery, portanto, também é necessário o conhecimento de Jquery.
Parallax Scrolling Plugins
1. ScrollMagic
O ScrollMagic é um dos plugins jquery mais populares e ricos em recursos do mercado. É uma biblioteca javascript que permite criar efeitos de rolagem aparentemente mágicos. Usando o ScrollMagic, você pode animar com base na sua posição de rolagem. Isso significa que você pode corrigir, mover ou animar elementos HTML à medida que você rola, pela duração que desejar, além de adicionar facilmente efeitos de paralaxe ao seu site. É altamente personalizável e também é leve (6kb quando compactado). Entre outros plugins de rolagem de paralaxe, o Scroll Magic tem a melhor documentação e recursos externos. Também é perfeitamente compatível com dispositivos móveis.
O ScrollMagic tem muitos exemplos listados. Confira-os para obter inspiração e orientação sobre o uso desta biblioteca.
Sobre:
Página inicial: http://janpaepke.github.io/ScrollMagic/
Criado por: Jan Paepke
Instalação:
1. CDN:
2. Baixe do Github
2. skrollr
O skrollr é uma biblioteca Javascript e CSS pura e leve, sem jQuery envolvido. É basicamente o 'Scroll Magic simplificado para CSS'. Para usar o skrollr, você não precisa conhecer Javascript ou jQuery. Apenas HTML e CSS são suficientes. O skrollr usa atributos de dados para animar qualquer elemento HTML que você desejar. Uma das principais desvantagens do skrollr é que as animações funcionam apenas enquanto a página está sendo rolada. Caso contrário, todos os efeitos são colocados em espera. O skrollr permite animar todas as propriedades CSS dos seus elementos HTML.
Sobre:
Página inicial: http://prinzhorn.github.io/skrollr/
Criado por: Prinzhorn
Instalação: Faça o download no Github
3. pagePiling.js
Page Piling é um plugin jQuery que permite criar seu site em diferentes seções que se acumulam. Ao rolar ou acessar o URL, cada seção é revelada em uma animação deslizante elegante. O pagePiling.js é compatível com todas as plataformas (desktop, tablet e celular) e funciona com a maioria dos navegadores. Ele é degradado normalmente em navegadores mais antigos que não suportam suas animações (como o IE 7). Para usar o plug-in, é necessário incluir um arquivo CSS e Javascript em seu HTML. O pagePiling.js é inicializado pela função (document) .ready:
$ (document) .ready (function ()
$ ('# pagepiling'). pagepiling ();
);
Para inicializações mais avançadas, acesse o arquivo README.md.
Sobre:
Página inicial: http://alvarotrigo.com/pagePiling/
Criado por: alvarotrigo
Instalação: Faça o download no Github
4. Alton
Alton é um plugin do jQuery 'scroll-jacking to us'. Bloqueio de rolagem significa que a rolagem nativa do navegador está desativada em favor da rolagem direcionada que, quando iniciada (pela roda do mouse ou pelo touchpad), leva você ao próximo ponto vertical na tela ou à parte superior do próximo contêiner..
Alton permite a funcionalidade de três tipos separados, chamados 'Hero', 'Bookend' e 'Standard'. Padrão permite que você use a rolagem de página inteira, com cada seção com 100% de altura. Um pergaminho mostra a próxima seção ou a seção anterior. O suporte para livros permite criar uma experiência do tipo suporte para livros, enquanto o Hero permite rolar o jack apenas na seção 'Hero', com o restante da página tendo a rolagem nativa (reativada).
Sobre:
Página inicial: http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Criado por: paper-leaf
Instalação: Faça o download no Github
5. Stellar.js
Stellar é um plugin jQuery através do qual você pode adicionar facilmente efeitos de rolagem de paralaxe. Para executar, primeiro você deve executar a função $ .stellar (). As configurações de animação para elementos individuais podem ser configuradas usando atributos de dados nesse elemento.
Stellar ainda permite que você tenha fundos de paralaxe, que são reposicionados na rolagem. Um dos recursos mais úteis do Stellar.js é o deslocamento.
Todos os elementos retornam ao seu posicionamento original quando seu pai de deslocamento encontra a borda da tela mais ou menos seu próprio deslocamento opcional. Isso permite que você crie padrões intrincados de paralaxe com muita facilidade. (Documentação estelar)
Sobre:
Página inicial: http://markdalgleish.com/projects/stellar.js/
Criado por: Mark Dalgeish
Instalação: Faça o download no Github
6. multiScroll.js
Este plugin foi criado pelo mesmo desenvolvedor (alvarotrigo) que criou o plugin pagePiling.js. O que a rolagem múltipla basicamente faz é: permite criar um efeito no qual cada seção da página é carregada em duas partes divididas que deslizam no lugar à medida que a página é carregada. Confira a página inicial para ver como é isso no seu navegador. O multiScroll.js permite definir a velocidade de rolagem, a flexibilização, a opção de rolagem do teclado e muitas outras propriedades, para que você possa personalizar o efeito exatamente da maneira que precisa..
Sobre:
Página inicial: http://alvarotrigo.com/multiScroll/
Criado por: alvarotrigo
Instalação: Faça o download no Github
7. ScrollMe
ScrollMe é um plugin para adicionar efeitos simples de rolagem de paralaxe à sua página. Ele pode dimensionar, girar, traduzir e alterar a opacidade dos elementos na página, conforme você rola para baixo. O ScrollMe não requer Javascript, e apenas o conhecimento de CSS é suficiente. Adicionando a classe “animateme” e os atributos de dados necessários, você pode animar qualquer elemento HTML. O ScrollMe é melhor usado para adicionar efeitos CSS. É leve e todas as animações são suaves, desde que você as use com moderação.
Sobre:
Página inicial: http://scrollme.nckprsn.com/
Criado por: Nick Pearson
Instalação: Faça o download no Github
8. Rolagem de paralaxe
Parallax Scroll é um plugin jQuery fácil de usar, que permite criar o efeito de rolagem de imagem de paralaxe encontrado em sites como o Spotify. É bastante simples de usar - basta especificar as classes CSS necessárias para os detentores de imagens. Em vez de usar 
Jarallax é uma biblioteca CSS e Javascript especializada em efeitos de rolagem de paralaxe. Jarallax é configurado usando Javascript (sem jQuery, apenas JS puro de baunilha). Ele suporta recursos de rolagem suavizada, suavização e animação de paralaxe. Jarallax é suportado pela maioria dos navegadores, em várias plataformas. O site Jarallax possui uma documentação excelente sobre como personalizar o Jarallax para suas necessidades. O Jarallax também possui tutoriais em vídeo mostrando como configurar o Jarallax para o seu site e como começar.
Sobre:
Página inicial: http://www.jarallax.com/
Criado por: Jarallax
Instalação: Faça o download no site da Jarallax
10. Superscrollorama
Superscrollorama é um plugin baseado em jQuery que suporta animações de rolagem. É alimentado por TweenMax e Greensock Tweening Engine, o que aumenta o desempenho e a suavidade da animação. As animações de supercrollorama são chamadas via jQuery e você também pode usar a maioria das funções do TweenMax.js. Infelizmente, essas animações não são totalmente compatíveis com dispositivos móveis (porque os dispositivos com tela de toque lidam com a rolagem de uma maneira diferente). No entanto, usando o método setScrollContainerOffset, os efeitos Superscrollorama podem ser acessados em dispositivos móveis.
Aqui está o código para fazer isso:
.setScrollContainerOffset (x, y)
(x: o deslocamento x do container de rolagem, y: o deslocamento x do container de rolagem)
Sobre:
Página inicial: http://johnpolacek.github.io/superscrollorama/
Criado por: johnpolacek
Instalação: Faça o download no Github
VEJA TAMBÉM: 10 melhores geradores de sites estáticos