10 melhores plug-ins de rolagem paralaxe

Os sites de rolagem longa se tornaram uma tendência realmente 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. Conforme o usuário rola a página para baixo, as animações são acionadas e, de modo geral, dão uma nova aparência a qualquer site, se implementadas corretamente.

Fazer um site de rolagem paralaxe costuma ser tedioso porque requer conhecimento profundo de CSS, Javascript e um bom design de web para funcionar. Aqui está uma lista de Melhores plug-ins de rolagem paralaxe que não só torna mais fácil para você criar sites de rolagem de paralaxe, mas também tem uma biblioteca de efeitos de paralaxe bem equipada para que se torne mais fácil e rápido desenvolver uma página da web com boa aparência.

AVISO LEGAL: 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 jquery, então o conhecimento de Jquery também pode ser necessário.

Plug-ins Parallax Scrolling

1. ScrollMagic

ScrollMagic é um dos plugins jquery mais populares e ricos em recursos que existem. É uma biblioteca javascript que permite criar efeitos de rolagem aparentemente mágicos. Usando ScrollMagic você pode animar com base em sua posição de rolagem. Isso significa que você pode corrigir, mover ou animar elementos HTML à medida que 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 compactado com gzip). Entre outros plugins de rolagem paralaxe, Scroll Magic possui a melhor documentação e recursos externos. É perfeitamente compatível com dispositivos móveis também.

ScrollMagic tem muitos exemplos listados. Verifique-os para obter inspiração e orientação sobre como usar esta biblioteca.

Cerca de:

Página inicial: http://janpaepke.github.io/ScrollMagic/

Criado por: Jan Paepke

Instalação:

1. CDN:

2. Baixe do Github

2. skrollr

skrollr é uma biblioteca Javascript e CSS pura leve, sem jQuery envolvido. É 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. skrollr usa atributos de dados para animar qualquer elemento HTML que você deseja. 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. skrollr permite animar todas as propriedades CSS de seus elementos HTML.

Cerca de:

Página inicial: http://prinzhorn.github.io/skrollr/

Criado por: Prinzhorn

Instalação: Baixe do Github

3. pagePiling.js

Page Piling é um plugin jQuery que permite que você crie seu site em diferentes seções, empilhadas umas sobre as outras. Ao rolar ou acessar a URL, cada seção é revelada em uma bela animação deslizante. pagePiling.js é compatível com todas as plataformas - desktop, tablet e celular - e funciona com a maioria dos navegadores. Ele se degrada normalmente em navegadores mais antigos que não suportam suas animações (como o IE 7). Para usar o plugin, você precisa incluir um CSS e um arquivo Javascript dentro do seu HTML. pagePiling.js é inicializado pela função (documento) .ready:

$ (document) .ready (function ()
$ ('# pagepiling'). pagepiling ();
);

Para inicializações mais avançadas, vá até README.md.

Cerca de:

Página inicial: http://alvarotrigo.com/pagePiling/

Criado por: alvarotrigo

Instalação: Baixe do Github

4. Alton

Alton é um plugin jQuery 'scroll-jacking to us'. Scroll jacking significa que a rolagem nativa do seu navegador é desativada em favor da rolagem direcionada que, quando iniciada (pela roda do mouse ou touchpad), leva você para o próximo ponto vertical na tela ou para o topo do próximo contêiner.

Alton permite três tipos separados de funcionalidade, 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. Bookend permite que você crie uma experiência do tipo bookend, enquanto Hero permite que você role apenas a seção 'Hero', com o resto da página tendo (reativado) a rolagem nativa.

Cerca de:

Página inicial: http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/

Criado por: paper-leaf

Instalação: Baixe do Github

5. Stellar.js

Stellar é um plugin jQuery por meio 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 planos de fundo paralaxe, que são planos de fundo que se reposicionam na rolagem. Um dos recursos mais úteis do Stellar.js são os offsets.

Todos os elementos retornarão ao seu posicionamento original quando seus pais deslocados encontrarem a borda da tela - mais ou menos seu próprio deslocamento opcional. Isso permite que você crie padrões de paralaxe intrincados com muita facilidade. (Documentação Estelar)

Cerca de:

Página inicial: http://markdalgleish.com/projects/stellar.js/

Criado por: Mark Dalgeish

Instalação: Baixe 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 em que cada seção da página carrega em duas partes divididas que deslizam no lugar conforme a página carrega. Verifique a página inicial para ver como fica no seu navegador. multiScroll.js permite definir a velocidade de rolagem, atenuação, opção de rolagem do teclado e muitas outras propriedades para que você possa personalizar o efeito exatamente como você precisa que seja.

Cerca de:

Página inicial: http://alvarotrigo.com/multiScroll/

Criado por: alvarotrigo

Instalação: Baixe 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 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, contanto que você as use com moderação.

Cerca de:

Página inicial: http://scrollme.nckprsn.com/

Criado por: Nick Pearson

Instalação: Baixe do Github

8. Parallax Scroll

Parallax Scroll é um plugin jQuery fácil de usar que permite criar o efeito de rolagem de imagem paralaxe encontrado em sites como o Spotify. É bastante simples de usar - basta especificar as classes CSS necessárias para os suportes de imagem. 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 consultas CSS @media.

Cerca de:

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

Criado por: Aen

Instalação: Baixe do Github

9. Jarallax

Jarallax é uma biblioteca CSS e Javascript especializada em efeitos de rolagem paralaxe. Jarallax é configurado usando Javascript (sem jQuery, apenas JS vanilla puro). Ele oferece suporte a recursos de rolagem suave, atenuação e animação paralaxe. Jarallax é compatível com a maioria dos navegadores, entre plataformas. O site do Jarallax possui uma documentação excelente sobre como personalizar o Jarallax de acordo com suas necessidades. O Jarallax também tem tutoriais em vídeo mostrando como configurar o Jarallax para o seu site e como começar.

Cerca de:

Página inicial: http://www.jarallax.com/

Criado por: Jarallax

Instalação: Baixe do site do Jarallax

10. Superscrollorama

Superscrollorama é um plugin baseado em jQuery que suporta animações de rolagem. É alimentado por TweenMax e Greensock Tweening Engine, que aumenta o desempenho da animação e suavidade. 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 de 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:

.setScrollContainerOffset (x, y)

(x: o deslocamento x do contêiner de rolagem, y: o deslocamento x do contêiner de rolagem)

Cerca de:

Página inicial: http://johnpolacek.github.io/superscrollorama/

Criado por: johnpolacek

Instalação: Baixe do Github

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