Sites de rolagem longa se tornaram uma tendência muito comum de web design. Um dos subtipos mais legais disso são os sites de rolagem de paralaxe, onde as imagens se movem para emitir um efeito de paralaxe. À medida que o usuário percorre a página, as animações são acionadas e, no geral, dá uma nova aparência a qualquer site, se implementado corretamente.
Fazer um site de rolagem paralaxe é muitas vezes tedioso porque requer um conhecimento profundo de CSS, Javascript e um bom design web para conseguir. Aqui está uma lista dos melhores plugins de rolagem de paralaxe que não só facilitam a criação de sites de rolagem de paralaxe, mas também uma biblioteca de efeitos de paralaxe bem dotada para que se torne mais fácil e rápido desenvolver uma página da web de boa aparência .
ISENÇÃO DE RESPONSABILIDADE : Antes de começar, note que para usar estes plugins é necessário algum conhecimento de tecnologias web (HTML / CSS / Javascript). A maioria dos plug-ins listados utiliza o jquery, portanto, o conhecimento do Jquery também pode ser necessário.
Plugins de rolagem de paralaxe
1. ScrollMagic
ScrollMagic é um dos mais populares e ricos em recursos jquery plugins lá fora. É uma biblioteca javascript permite criar efeitos de rolagem aparentemente mágicos. Usando 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, por qualquer duração desejada, além de adicionar facilmente efeitos de paralaxe ao seu site. É altamente personalizável e também é leve (6kb quando gzipped). Entre outros plugins de rolagem paralaxe, Scroll Magic tem a melhor documentação e recursos externos. É perfeitamente compatível com o celular também.
ScrollMagic tem muitos exemplos listados. Confira-os em busca de inspiração e orientação sobre o uso dessa biblioteca.
Sobre:
Página inicial: //janpaepke.github.io/ScrollMagic/
Criado por: Jan Paepke
Instalação:
1. CDN:
2. Faça o download do Github
2. skrollr
O skrollr é uma biblioteca leve de JavaScript e CSS, sem nenhum jQuery envolvido. É basicamente o 'Scroll Magic simplificado para CSS'. Para usar skrollr, você não precisa saber Javascript ou qualquer jQuery. Apenas HTML e CSS são suficientes. O skrollr usa atributos de dados para animar qualquer elemento HTML que você quiser. 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:
Homepage: //prinzhorn.github.io/skrollr/
Criado por: Prinzhorn
Instalação: Download do Github
3. pagePiling.js 
Page Piling é um plugin jQuery que permite criar seu site em diferentes seções que se sobrepõem umas às outras. Ao rolar, ou acessando o URL, cada seção é revelada em uma animação deslizante. pagePiling.js é compatível com todas as plataformas - desktop, tablet e celular - e funciona com a maioria dos navegadores. Ele degrada graciosamente em navegadores mais antigos que não suportam suas animações (como o IE 7). Para usar o plugin, você precisa incluir um arquivo CSS e um arquivo Javascript dentro do seu HTML. pagePiling.js é inicializado pela função (document) .ready:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
Para inicializações mais avançadas, passe pelo README.md.
Sobre:
Homepage: //alvarotrigo.com/pagePiling/
Criado por: alvarotrigo
Instalação: Download do Github
4. Alton
Alton é um plugin de 'scroll-jacking to us' da jQuery. Scroll jacking significa que a rolagem nativa do seu navegador está desativada em favor da rolagem direcionada que, quando iniciada (pela roda do mouse ou touchpad), leva você ao próximo ponto vertical na tela ou ao topo do próximo container.
Alton permite três funcionalidades de tipos separados, chamadas 'Hero', 'Bookend' e 'Standard'. Padrão permite que você use a rolagem de página inteira, com cada seção de 100% de altura. Um pergaminho traz adiante a próxima seção ou a seção anterior. O Bookend permite que você crie uma experiência tipo bookend enquanto o Hero permite que você role apenas a seção 'Hero', com o resto da página tendo (reenabled) rolagem nativa.
Sobre:
Página inicial: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Criado por: folha de papel
Instalação: Download do Github
5. Stellar.js
Stellar é um plugin jQuery através do qual você pode facilmente adicionar efeitos de rolagem paralaxe. Para rodar, primeiro você deve executar a função $ .stellar (). 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 planos de fundo que se reposicionam no pergaminho. Um dos recursos mais úteis do Stellar.js são as compensações.
Todos os elementos retornarão ao seu posicionamento original quando o pai da compensação encontrar a borda da tela - mais ou menos o seu próprio deslocamento opcional. Isso permite que você crie padrões intrincados de paralaxe com muita facilidade. (Documentação Estelar)
Sobre:
Homepage: //markdalgleish.com/projects/stellar.js/
Criado por: Mark Dalgeish
Instalação: Download do Github
6. multiScroll.js
Este plugin é criado pelo mesmo desenvolvedor (alvarotrigo) que fez o plugin pagePiling.js. O que a rolagem múltipla basicamente faz é permitir que você crie um efeito no qual a seção de cada página carrega em duas partes divididas que deslizam no lugar conforme 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 atenuação, a opção de rolagem do teclado e muitas outras propriedades para que você possa personalizar o efeito exatamente como precisa.
Sobre:
Página inicial: //alvarotrigo.com/multiScroll/
Criado por: alvarotrigo
Instalação: Download do Github
7. ScrollMe
ScrollMe é um plugin para adicionar efeitos de rolagem de paralaxe simples à sua página. Ele pode dimensionar, girar, traduzir e alterar a opacidade dos elementos na página, conforme você rola para baixo. ScrollMe não requer Javascript, e apenas conhecimento CSS é suficiente. Ao adicionar a classe "animateme" e os atributos de dados necessários, você pode animar qualquer elemento HTML. ScrollMe é melhor usado para adicionar efeitos CSS. É leve e todas as animações são suaves, contanto que você as use com moderação.
Sobre:
Página inicial: //scrollme.nckprsn.com/
Criado por: Nick Pearson
Instalação: Download do Github
8. Pergaminho de Paralaxe
Parallax Scroll é um fácil de usar plugin jQuery que permite criar o efeito de rolagem de imagem parallax encontrado em sites como o Spotify. É bastante simples de usar - basta especificar as classes CSS necessárias para os proprietários das imagens. Em vez de usar tags, para usar este plugin você deve usar elementos que tenham uma imagem de fundo especificada (usando a propriedade CSS `background-image`. Você pode tornar os elementos responsivos usando as consultas CSS @media.
Sobre:
Página inicial: //parallax-scroll.aenism.com/
Criado por: Aen
Instalação: Download do Github
9. Jarallax
Jarallax é uma biblioteca CSS e Javascript especializada em efeitos de rolagem parallax. Jarallax é configurado usando Javascript (No jQuery, apenas baunilha JS). Ele suporta recursos de rolagem suavizada, atenuação e animação de paralaxe. Jarallax é suportado pela maioria dos navegadores, em todas as plataformas. O site Jarallax tem uma excelente documentação sobre como personalizar o Jarallax para as suas necessidades. Jarallax também tem tutoriais em vídeo mostrando como configurar o Jarallax para o seu site e como começar.
Sobre:
Homepage: //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. Ele é ativado pelo TweenMax e pelo Greensock Tweening Engine, o que aumenta o desempenho da animação e a suavidade. As animações Superscrollorama 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 de tela sensível ao toque lidam com a rolagem de 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: //johnpolacek.github.io/superscrollorama/
Criado por: johnpolacek
Instalação: Download do Github
VEJA TAMBÉM: 10 melhores geradores de site estático
