JQuery Parallax Effect

In this blog you will see JQuery Parallax Effect.

What does jquery.parallax do?

jParallax turns nodes into absolutely positioned layers that move in response to the mouse. Depending on their dimensions these layers move in a parallaxy kind of way.

To see layers through a viewport, wrap them in a container with the style,

<ul>
    <li class=” parallax-layer”></li>
    <li class=” parallax-layer”></li>
</ul>

CSS:

#content
{
    background - color: #FFFFFF;
    text - align: left;
    padding: 0 px;
}

h1
{
    padding: 20 px;
    background - color: gray;
    color: white;
    margin: 0;
    text - shadow: #9E9B9B 2px 2px 2px;
text-align: center;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#E3E1E1',
    endColorstr = '#CCCACA'); /* for IE */
background: -webkit - gradient(linear, left top, left bottom, from(#E3E1E1), to(#CCCACA)); /* for webkit browsers */
background: -moz - linear - gradient(top, #E3E1E1, #CCCACA); /* for firefox 3.6+ */
}

.large
{
    font - size: 22 px;
}

.orange
{
    color: orange;
}

.italic
{
    font - style: italic;
}

.textmiddle
{
    vertical - align: middle;
}

.padout
 {
    padding - left: 25 px;
    padding - right: 25 px;
}

.rounded - corners
{
    -moz - border - radius: 40 px; - webkit - border - radius: 40 px; - khtml - border - radius: 40 px;
    border - radius: 40 px;
}

.rounded - corners - top
 {
    -moz - border - top - radius: 40 px; - webkit - border - radius: 40 px; - khtml - border - radius: 40 px;
    border - radius: 40 px;
}

h2
 {
    color: blue;
    font - size: 22 px;
    color: white;
    background - color: gray;
    padding: 10 px 10 px 10 px 20 px; - moz - border - radius: 40 px; - webkit - border - radius: 40 px; - khtml - border - radius: 40 px;
    border - radius: 40 px;
    text - shadow: #9E9B9B 2px 2px 2px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#E3E1E1',
    endColorstr = '#CCCACA'); /* for IE */
background: -webkit - gradient(linear, left top, left bottom, from(#E3E1E1), to(#CCCACA)); /* for webkit browsers */
background: -moz - linear - gradient(top, #E3E1E1, #CCCACA); /* for firefox 3.6+ */
}

p {
    margin: 20 px!important;
}

.scrolldown
{
    padding - left: 20 px;
    color: #EDECE8;
    font - size: 40 px;
    font - weight: bold;
    vertical - align: middle;
    text - shadow: #6374AB 2px 2px 2px;
}

# page - wrap
    {
        border: 1 px solid orange;
        margin: 10 px auto;
        /*width: 950px;*/
    }

    #parallax - header
    {
        height: 200 px;
        background - color: gray;
    }

    #parallax
     {
        position: relative;
        overflow: hidden;
        height: 506 px;
        width: 1348 px;
        background - image: url('images/1.jpg');
    }

    .parallax - viewport
    {
        position: relative; /* relative, absolute, fixed */
        overflow: hidden;
    }

    .parallax - layer
    {
        position: absolute;
    }

HTML:

Put different slices of images in different containers. Set height and width of them accordingly.

<div id="parallax" class="clear">
    <div class="parallax-layer" style="width:1002px; height:509px;">
        <img src="images/2.png" alt="" style="width:1002px; height:509px;" />
    </div>
</div>

JQuery:

Code for detecting mouse moment. According to mouse moment picture moves.

<script type="text/javascript">
    jQuery(document).ready(function()
    {
        $('#parallax .parallax-layer')
            .parallax
            ({
                mouseport: $('#parallax')
            });
    });
</script>

Herewith I am attaching source code. Please refer it for further reference.