Creating Parallax effect with jQuery – simple, fast and easy

PagePiling.js is a plugin for jQuery which greatly facilitates the process to create Parallax effects. The plugin support the older browsers as well as phones and tablets. Like any other plugin installation and customization is easy and fast.

Unlike other similar alternatives, I found the pagePilling with a final result of excellent quality and the possibility to customize very simply plugin. Its use has a very common process, only need to use the div element to create your page sections, then the plugin does the work for you by creating that beautiful smooth scrolling parallax.

Compatibility

Its creators thought in designing the plugin to work on touch devices such as mobile phones and tablets. PagePiling.js is fully compatible with all modern browsers. Also works in some older browsers, such as Internet Explorer 8 and 9, Opera 12, etc. It works with browsers that does not support CSS3 as well.

Creating the effect Parallax with pagePiling.js

Like any other plugin, you need to include the jquery.pagepiling.js aquivo (or the compressed file jquery.pagepiling.min.js) and the jquery.pagepiling.css styles file in your HTML page.
In the head of your page includes the jQuery calls and the plugin CSS:

HTML
<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>

The pagePiling.js recommend plugin call is made at the end of your document before the closing of the body element , like this:

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

Each section of your page will be set by a div element with the class section . By default the active section is the first , which is its homepage. Below example of the basic structure of your HTML

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

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

Personalizando o plugin

You can initialize the plugin to change the effect of behavior, for example : direction of the effect , speed among many others. Below is an example .

jQuery
$(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,
    });
});
Every plugin documentation is found at:

https://github.com/alvarotrigo/pagePiling.js#pagepilingjs

1 Response

Leave a Reply

Optimized with PageSpeed Ninja