Post
Ask Question

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.

layer

To see layers through a viewport, wrap them in a container with the style,
  1. <ul>  
  2.     <li class=” parallax-layer”></li>  
  3.     <li class=” parallax-layer”></li>  
  4. </ul>  
CSS:
  1. #content  
  2. {  
  3.     background - color: #FFFFFF;  
  4.     text - align: left;  
  5.     padding: 0 px;  
  6. }  
  7.   
  8. h1  
  9. {  
  10.     padding: 20 px;  
  11.     background - color: gray;  
  12.     color: white;  
  13.     margin: 0;  
  14.     text - shadow: #9E9B9B 2px 2px 2px;  
  15. text-align: center;  
  16. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#E3E1E1',  
  17.     endColorstr = '#CCCACA'); /* for IE */  
  18. background: -webkit - gradient(linear, left top, left bottom, from(#E3E1E1), to(#CCCACA)); /* for webkit browsers */  
  19. background: -moz - linear - gradient(top, #E3E1E1, #CCCACA); /* for firefox 3.6+ */  
  20. }  
  21.   
  22. .large  
  23. {  
  24.     font - size: 22 px;  
  25. }  
  26.   
  27. .orange   
  28. {  
  29.     color: orange;  
  30. }  
  31.   
  32. .italic  
  33. {  
  34.     font - style: italic;  
  35. }  
  36.   
  37. .textmiddle   
  38. {  
  39.     vertical - align: middle;  
  40. }  
  41.   
  42. .padout   
  43.  {  
  44.     padding - left: 25 px;  
  45.     padding - right: 25 px;  
  46. }  
  47.   
  48. .rounded - corners   
  49. {  
  50.     -moz - border - radius: 40 px; - webkit - border - radius: 40 px; - khtml - border - radius: 40 px;  
  51.     border - radius: 40 px;  
  52. }  
  53.   
  54. .rounded - corners - top  
  55.  {  
  56.     -moz - border - top - radius: 40 px; - webkit - border - radius: 40 px; - khtml - border - radius: 40 px;  
  57.     border - radius: 40 px;  
  58. }  
  59.   
  60. h2  
  61.  {  
  62.     color: blue;  
  63.     font - size: 22 px;  
  64.     color: white;  
  65.     background - color: gray;  
  66.     padding: 10 px 10 px 10 px 20 px; - moz - border - radius: 40 px; - webkit - border - radius: 40 px; - khtml - border - radius: 40 px;  
  67.     border - radius: 40 px;  
  68.     text - shadow: #9E9B9B 2px 2px 2px;  
  69. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#E3E1E1',  
  70.     endColorstr = '#CCCACA'); /* for IE */  
  71. background: -webkit - gradient(linear, left top, left bottom, from(#E3E1E1), to(#CCCACA)); /* for webkit browsers */  
  72. background: -moz - linear - gradient(top, #E3E1E1, #CCCACA); /* for firefox 3.6+ */  
  73. }  
  74.   
  75. p {  
  76.     margin: 20 px!important;  
  77. }  
  78.   
  79. .scrolldown   
  80. {  
  81.     padding - left: 20 px;  
  82.     color: #EDECE8;  
  83.     font - size: 40 px;  
  84.     font - weight: bold;  
  85.     vertical - align: middle;  
  86.     text - shadow: #6374AB 2px 2px 2px;  
  87. }  
  88.  
  89. # page - wrap  
  90.     {  
  91.         border: 1 px solid orange;  
  92.         margin: 10 px auto;  
  93.         /*width: 950px;*/  
  94.     }  
  95.  
  96.     #parallax - header  
  97.     {  
  98.         height: 200 px;  
  99.         background - color: gray;  
  100.     }  
  101.  
  102.     #parallax  
  103.      {  
  104.         position: relative;  
  105.         overflow: hidden;  
  106.         height: 506 px;  
  107.         width: 1348 px;  
  108.         background - image: url('images/1.jpg');  
  109.     }  
  110.   
  111.     .parallax - viewport   
  112.     {  
  113.         position: relative; /* relative, absolute, fixed */  
  114.         overflow: hidden;  
  115.     }  
  116.   
  117.     .parallax - layer  
  118.     {  
  119.         position: absolute;  
  120.     }  
HTML:

Put different slices of images in different containers. Set height and width of them accordingly.
  1. <div id="parallax" class="clear">  
  2.     <div class="parallax-layer" style="width:1002px; height:509px;">  
  3.         <img src="images/2.png" alt="" style="width:1002px; height:509px;" />  
  4.     </div>  
  5. </div>  
JQuery:

Code for detecting mouse moment. According to mouse moment picture moves.
  1. <script type="text/javascript">  
  2.     jQuery(document).ready(function()   
  3.     {  
  4.         $('#parallax .parallax-layer')  
  5.             .parallax  
  6.             ({  
  7.                 mouseport: $('#parallax')  
  8.             });  
  9.     });  
  10. </script>  
Herewith I am attaching source code. Please refer it for further reference.