Criando efeito Parallax com jQuery – simples, rápido e fácil

2 de março de 2015 por Kadu Oliveira

PagePiling.js é um plugin para jQuery que facilita muito o processo para criar efeitos Parallax. O plugin da suporte a navegadores antigos e também a celulares e tablets. Como qualquer outro plugin sua instalação e personalização é fácil e rápida.

Ao contrário de outras alternativas semelhantes, achei o pagePilling com um resultado final de ótima qualidade e ainda a possibilidade de personalizar o plugin de forma bem simples. Sua utilização tem um processo bem comum, só precisa usar o elemento div para criar as seções de sua página, depois o plugin faz o trabalho para você criando aquela bela rolagem suave do parallax.

Compatibilidade

Seus criadores pensaram em projetar o plugin para funcionar em dispositivos de toque, como telefones celulares e tablets. PagePiling.js é totalmente compatível com todos navegadores modernos. Funciona também em alguns navegadores antigos, como o Internet Explorer 8 e 9, Opera 12, etc. Ele funciona com os navegadores sem suporte a CSS3 também.

Criando o efeito Parallax com pagePiling.js

Como qualquer outro plugin, você precisa incluir o aquivo jquery.pagepiling.js (ou o arquivo compactado jquery.pagepiling.min.js) e o arquivo de estilos jquery.pagepiling.css na sua página HTML.
No head da sua página inclua as chamadas do jQuery e do CSS do plugin:

<head>
  <link rel="stylesheet" type="text/css" href="jquery.pagepiling.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

A chamada do plugin pagePiling.js recomendamo que seja feita no final do seu documento, antes do fechamento do elemento body, assim:

<script type="text/javascript" src="jquery.pagepiling.js"></script>
</body>

Cada seção da sua página será definida por um elemento div com a classe section. Por padrão a seção ativa é a primeira, que é sua homepage. Abaixo exemplo da estrutura básica do seu HTML

<div id="pagepiling">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>

Inicializando seu plugin

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

Personalizando o plugin

Você pode inicializar o plugin a alterar o comportamento do efeito, por exemplo: direção do efeito, velocidade entre muitos outros. Abaixo um exemplo.

$(document).ready(function() {
    $('#pagepiling').pagepiling({
        menu: null,
        direction: 'vertical',
        verticalCentered: true,
        scrollingSpeed: 700,
        easing: 'swing',
        loopBottom: false,
        loopTop: false,
        css3: true,
        normalScrollElementTouchThreshold: 5,
        touchSensitivity: 5,
        keyboardScrolling: true,
        sectionSelector: '.section',
        animateAnchor: false,
    });
});

Toda documentação do plugin é encontrada em:
https://github.com/alvarotrigo/pagePiling.js#pagepilingjs

Siga-me no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.