Parallax Demo and explanation

Include the jquery.parallax.js file in the <head> section of your HTML file

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

Here is an example of the parallax.js

Example HTML:

<section class="parallax-wrapper">
    <figure class="parallax"></figure>
</section>

Example CSS:

.parallax-wrapper{
    position: relative;
    height: 400px;
    overflow: hidden;
}
.parallax{
    position: relative;
    background-image: url(raven.png);
    background-size: cover;
    height: 900px;
    top: -300px;
    left: 8%;
    margin-left: -300px;
}

Its important that the picture's height is greater than the visible part in the parallax-wrapper


Call the the parallax effect:

$(".parallax").parallax();

Parallax Options

Here is a list of all the available options in parallax.js

Speed

speed: 100

determine the speed in which the image is moving. Use low numbers for faster speed and high numbers for slower speed
default value is 100

the image moves faster with a speed of 60:

$(".parallax").parallax({
    speed: 60
});

the image moves slower with a speed of 200:

$(".parallax").parallax({
    speed: 200
});

Delay

delay: 1000

determine the delay in milliseconds
the default value is 1000ms

the image moves after a 300ms delay:

$(".parallax").parallax({
    delay: 300
});

the image moves after a 2000ms delay:

$(".parallax").parallax({
    delay: 2000
});

Ascending

ascending: true

determine the direction in which the image is moving
the default value is true

true moving from top to bottom

false moving from bottom to top


image moves towards to the bottom while scolling down:

$(".parallax").parallax({
    speed: 90,
    ascending: true,
    delay: 1000
});

image moves towards to the top while scolling down:

$(".parallax").parallax({
    speed: 90,
    ascending: false,
    delay: 1000
});