Os 10 melhores plugins de rolagem de paralaxe

30 de abril de 2020 0 271

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.

Criar um site de rolagem de paralaxe geralmente é entediante, pois requer conhecimento aprofundado de CSS, Javascript e bom design da web para ser realizado. 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 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 o jquery, portanto, o conhecimento do Jquery também pode ser necessário.

Parallax Scrolling Plugins

1. ScrollMagic

Scroll Magic>

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 exemploslistados. Confira-os para obter inspiração e orientação sobre o uso desta biblioteca.

Sobre:

Pagina inicial: http://janpaepke.github.io/ScrollMagic/

Criado por: Jan Paepke

Instalação:

1. CDN:

2) Download do Github

2. skrollr

skroll>

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 saber de 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:

Pagina inicial: http://prinzhorn.github.io/skrollr/

Criado por: Prinzhorn

Instalação: Download do Github

3. pagePiling.jspagePiling.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, você precisa 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 README.md.

Sobre:

Pagina inicial: http://alvarotrigo.com/pagePiling/

Criado por: alvarotrigo

Instalação: Download do Github

4. Alton

Alton>

Alton é um plugin 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 que você crie 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:

Pagina inicial: http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/

Criado por: folha de papel

Instalação: Download do Github

5. Stellar.js

Estelar>

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 definidas 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 são as compensações.

Todos os elementos retornam ao seu posicionamento original quando o 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:

Pagina inicial: http://markdalgleish.com/projects/stellar.js/

Criado por: Mark Dalgeish

Instalação: Download do Github

6. multiScroll.js

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:

Pagina inicial: http://alvarotrigo.com/multiScroll/

Criado por: alvarotrigo

Instalação: Download do Github

7. ScrollMe

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:

Pagina inicial: http://scrollme.nckprsn.com/

Criado por: Nick Pearson

Instalação: Download do Github

8. Rolagem de paralaxe

Pergaminho 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 Para usar esse plug-in, você deve usar elementos que tenham uma imagem de plano de fundo especificada (usando a propriedade CSS `background-image`. Você pode dar resposta aos elementos usando as consultas CSS @media. >

Sobre:

Página inicial: http://parallax-scroll.aenism.com/

Criado por: Aen

Instalação: Download do Github

9. Jarallax

Jarallax>

Jarallax é uma biblioteca CSS e Javascript especializada em efeitos de rolagem de paralaxe. O 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:

Pagina inicial: http://www.jarallax.com/

Criado por: Jarallax

Instalação: Faça o download no site da Jarallax

10. Superscrollorama

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:

Pagina inicial: http://johnpolacek.github.io/superscrollorama/

Criado por: johnpolacek

Instalação: Download do Github

VEJA TAMBÉM: 10 melhores geradores de sites estáticos

Dev