網頁滾動視差

Ref :  http://pixelcog.github.io/parallax.js/

Installation

Download and include parallax.min.js in your document after including jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/path/to/parallax.js"></script>

Useage

Via data attributes

To easily add a parallax effect behind an element, add data-parallax="scroll" to the element you want to use, and specify an image with data-image-src="/path/to/image.jpg".

<div class="parallax-window" data-parallax="scroll" data-image-src="/path/to/image.jpg"></div>

Via JavaScript

To call the parallax plugin manually, simply select your target element with jQuery and do the following:

$('.parallax-window').parallax({imageSrc: '/path/to/image.jpg'});

Under The Hood

What parallax.js will do is create a fixed-position element for each parallax image at the start of the document’s body. This mirror element will sit behind the other elements and match the position and dimensions of its target object.

Due to the nature of this implementation, you must ensure that these parallax objects and any layers below them are transparent so that you can see the parallax effect underneath. Also, if there is no other content in this element, you will need to ensure that it has some fixed dimensions otherwise you won’t see anything.

.parallax-window {
    min-height: 400px;
    background: transparent;
}