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 parallax kind of way.
With a bit of CSS, you can either set up windows to see these layers through or leave them free to roam about.
The diagram below illustrates what jParallax does to the html:
Using jParallax
The default behavior of jParallax is to show the whole width of a layer in response to the mouse traveling the whole width of the mouseport. When the mouse is moved to the extreme left-hand side of the mouseport the left-hand side of the layer meets the left-hand side of its viewport, and when the mouse is moved to the extreme right-hand side of the mouseport the right-hand side of the layer arrives at the right-hand-side of its viewport.
Therefore, the simplest way to use jParallax is to make the layers different sizes using CSS. Bigger layers move faster and unless a layer is smaller than the viewport, its edges are never seen.
To see layers through a viewport, wrap them in a container with the style,
The default behavior of jParallax is to show the whole width of a layer in response to the mouse traveling the whole width of the mouseport. When the mouse is moved to the extreme left-hand side of the mouseport the left-hand side of the layer meets the left-hand side of its viewport, and when the mouse is moved to the extreme right-hand side of the mouseport the right-hand side of the layer arrives at the right-hand-side of its viewport.
Therefore, the simplest way to use jParallax is to make the layers different sizes using CSS. Bigger layers move faster and unless a layer is smaller than the viewport, its edges are never seen.
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.
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.
