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.