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. }
  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. }
  22. .large
  23. {
  24. font - size: 22 px;
  25. }
  27. .orange
  28. {
  29. color: orange;
  30. }
  32. .italic
  33. {
  34. font - style: italic;
  35. }
  37. .textmiddle
  38. {
  39. vertical - align: middle;
  40. }
  42. .padout
  43. {
  44. padding - left: 25 px;
  45. padding - right: 25 px;
  46. }
  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. }
  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. }
  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. }
  75. p {
  76. margin: 20 px!important;
  77. }
  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. }
  89. # page - wrap
  90. {
  91. border: 1 px solid orange;
  92. margin: 10 px auto;
  93. /*width: 950px;*/
  94. }
  96. #parallax - header
  97. {
  98. height: 200 px;
  99. background - color: gray;
  100. }
  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. }
  111. .parallax - viewport
  112. {
  113. position: relative; /* relative, absolute, fixed */
  114. overflow: hidden;
  115. }
  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.