Sites de rolagem longa se tornaram uma tendência de web design muito comum. Um dos subtipos mais legais disso são os sites de rolagem paralaxe, onde as imagens se movem para dar 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.
Fazer um site de rolagem parallax costuma ser tedioso porque requer um conhecimento profundo de CSS, Javascript e um bom design da web para ser executado. Aqui está uma lista dos melhores plug-ins 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 seja mais fácil e rápido desenvolver uma página da web de boa aparência .
AVISO LEGAL : Antes de começar, observe que, para usar esses plug-ins, é necessário algum conhecimento de tecnologias da web (HTML/CSS/Javascript). A maioria dos plug-ins listados utiliza jquery, portanto, o conhecimento de Jquery também pode ser necessário.
Plug-ins de rolagem paralaxe
1. ScrollMagic
ScrollMagic é um dos plugins jquery mais populares e ricos em recursos disponíveis. É uma biblioteca javascript que 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 enquanto rola, por qualquer duração que desejar, e também adicionar facilmente efeitos de paralaxe ao seu site. É altamente personalizável e também é leve (6kb quando gzipado). Entre outros plugins de rolagem parallax, Scroll Magic tem a melhor documentação e recursos externos. É perfeitamente compatível com celular também.
ScrollMagic tem muitos exemplos listados. Confira-os para inspiração e orientação sobre como usar esta biblioteca.
Sobre:
Página inicial: http://janpaepke.github.io/ScrollMagic/
Criado por: Jan Paepke
Instalação:
2. skrollr
skrollr é uma biblioteca Javascript e CSS leve e pura, sem o envolvimento de jQuery. É basicamente o ‘Scroll Magic simplificado para CSS’. Para usar o 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ê desejar. Uma das principais desvantagens do skrollr é que as animações só funcionam 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 de seus elementos HTML.
Sobre:
Página inicial: http://prinzhorn.github.io/skrollr/
Criado por: Prinzhorn
3. pagePiling.js
Page Piling é um plug-in jQuery que permite criar seu site em diferentes seções que se empilham umas sobre as outras. Ao rolar ou acessar 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 Javascript dentro do seu HTML. pagePiling.js é inicializado pela função (document).ready:
Para inicializações mais avançadas, acesse o README.md.
Sobre:
Homepage: http://alvarotrigo.com/pagePiling/
Criado por: alvarotrigo
4. Alton
Alton é um plugin jQuery ‘scroll-jacking to us’. 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 contêiner.
Alton permite três tipos de funcionalidade separados, chamados ‘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 a próxima seção ou a seção anterior. O Bookend permite que você crie uma experiência do tipo bookend, enquanto o Hero permite que você role apenas a 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: folha de papel
5. Stellar.js
Stellar é um plugin jQuery através do qual você pode facilmente adicionar efeitos de rolagem parallax. Para executar, primeiro você deve executar a função $.stellar(). As configurações de animação para elementos individuais podem ser definidas usando atributos de dados nesse elemento.
O Stellar ainda permite que você tenha fundos de paralaxe, que são fundos que se reposicionam na rolagem. Um dos recursos mais úteis do Stellar.js são os deslocamentos.
Todos os elementos retornarão ao seu posicionamento original quando seu pai de deslocamento atingir a borda da tela – mais ou menos seu próprio deslocamento opcional. Isso permite que você crie padrões de paralaxe complexos com muita facilidade. (Documentação Estelar)
Sobre:
Página inicial: http://markdalgleish.com/projects/stellar.js/
Criado por: Mark Dalgeish
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 é criar um efeito em que cada seção da página é carregada em duas partes divididas que deslizam para o lugar conforme a página é carregada. Confira a página inicial para ver como isso se parece no seu navegador. multiScroll.js permite definir a velocidade de rolagem, easing, opção de rolagem do teclado e muitas outras propriedades para que você possa personalizar o efeito exatamente como precisa.
Sobre:
Homepage: http://alvarotrigo.com/multiScroll/
Criado por: alvarotrigo
7. ScrollMe
ScrollMe é um plug-in 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. 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. 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
8. Rolagem de paralaxe
Parallax Scroll é um plug-in jQuery fácil de usar 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 detentores da imagem. Em vez de usar tags , para usar este plug-in, você deve usar elementos que tenham uma imagem de fundo especificada (usando a propriedade CSS `background-image`). Você pode tornar os elementos responsivos usando consultas CSS @media.
Sobre:
Página inicial: http://parallax-scroll.aenism.com/
Criado por: Aen
9. Jaralax
Jarallax é uma biblioteca CSS e Javascript especializada em efeitos de rolagem parallax. Jarallax é configurado usando Javascript (sem jQuery, apenas puro JS vanilla). Ele oferece suporte a recursos de rolagem suavizada, atenuação e animação de paralaxe. Jarallax é suportado pela maioria dos navegadores, em todas as plataformas. O site do Jarallax possui excelente documentação sobre como customizar o Jarallax para suas necessidades. O Jarallax também possui tutoriais em vídeo que mostram como configurar o Jarallax para o seu site e como começar.
Sobre:
Página inicial: http://www.jarallax.com/
Criado por: Jaralax
10. Superscrolorama
Superscrollorama é um plug-in baseado em jQuery que suporta animações de rolagem. Ele é alimentado pelo TweenMax e pelo Greensock Tweening Engine, que aumenta o desempenho e a suavidade da animação. As animações do 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 suportadas por dispositivos móveis (porque os dispositivos de tela sensível ao toque lidam com a rolagem de uma maneira diferente). No entanto, usando o método setScrollContainerOffset, os efeitos do Superscrollorama podem ser acessados em dispositivos móveis.
Aqui está o código para fazer isso:
Página inicial: http://johnpolacek.github.io/superscrollorama/
Criado por: johnpolacek
