Jparallax is a parallax animation plugin library that creates a smooth animation effect within multiple positioned layers according to your needs. Depending on their dimensions each of the layers move at different rates and axis. You can set the movement of the parallax axis to horizontally or vertically as you need. There are various options to customize the parallax effect, position or axis.
1. Include the Javascript jquery.event.frame.js and jquery.parallax.min.js at the bottom of the web page.
<script src="path/to/jquery.event.frame.js"></script><script src="path/to/jquery.parallax.min.js"></script>2. Include the CSS jquery.parallax.css in the header of the page.
<link rel="stylesheet" href="path/to/jquery.parallax.css">3. Add the basic HTML to the page.
<div class="parallax-viewport" id="parallax">
<div class="parallax-layer">
<img src="path/to/img-1" alt=""/>
</div>
<div class="parallax-layer">
<img src="path/to/img-2" alt=""/>
</div>
</div>4. Add some custom CSS to position the parallax layer, for reference you can visit the demo page.
5. Initialize the plugin and we're ready to go.
jQuery(window).load(function() {
jQuery('#parallax .parallax-layer')
.parallax({
mouseport: jQuery('#parallax')
});
});| Option | Type | Default |
| mouseport | selector string | jQuery object | jQuery(document) |
| Identifies DOM node to track the mouse in. | ||
| xparallax | boolean | 0-1 | 'n%' | 'npx' | true |
| yparallax | boolean | 0-1 | 'n%' | 'npx' | true |
| Set to true or false to enable or disable movement. Alternatively, to control the range over which a layer travels, either pass in an absolute value in pixels, or a scaling factor in the range 0-1 (scaling factors can also be expressed as percentage strings). Scaling factors outside this range are also accepted, but be aware that factors below 0 (or '0%') will reverse the direction of travel, and greater than 1 (or '100%') will make layer edges appear inside the extremes of the viewport. | ||
| xorigin | 0-1 | 'n%' | 'left', 'center', 'middle', 'right' | 0.5 |
| yorigin | 0-1 | 'n%' | 'top', 'center', 'middle'. 'bottom' | 0.5 |
| Only meaningful when xparallax or yparallax are not 1. Determines which point of the layer lines up with which point of the viewport when the mouse is at that point in the mouseport. Got that? It's easy really. It's the same behaviour as the css property background-position. If xorigin is set to 0 (or 'left'), then when the mouse is moved to the left hand side of the mouseport the left hand side of the layer arrives at the left hand side of the viewport. If it's set to 0.5 (or 'center'), then when the mouse is at the centre of the mouseport the centre of the layer is aligned with the centre of the viewport. And similarly with 1 (or 'right').Numbers outside the range 0-1 may also be used. |
||
| freezeClass | string | 'freeze' |
| Class set on a layer when it is frozen. | ||
| decay | 0-1 | 0.66 |
| Sets the rate at which the layers 'catch up' with the mouse position. 0 is instantly, 1 is forever. | ||
| frameDuration | int (milliseconds) | 30 |
| Length of time between animation frames. With a lot of big layers, you may want to increase the frame duration to save CPU. About 50 is acceptable (20 frames/second), but I like it zippy. Modern browsers like Google Chrome have really accurate timing, but many older browsers choke below about 15ms. | ||
| width | int (px) | undefined |
| height | int (px) | undefined |
| Values for layer dimensions, normally read from css, can be overridden. This does NOT change the size of the layer, only jParallax's idea of how big it is. This can be very useful in cases where you want to be able to 'click through' the upper layers. Typically you make layers very small in css, but tell jParallax they are big via the width and height options. | ||
<div class="parallax-viewport" id="parallax">
<div class="parallax-layer" style="width:860px; height:273px;">
<img src="path/to/image-1" alt="" style="position:absolute; left:300px; top:-12px;"/>
</div>
<div class="parallax-layer" style="width:920px; height:274px;">
<img src="path/to/image-2" alt="" />
</div>
<div class="parallax-layer" style="width:1100px; height:284px;">
<img src="path/to/image-3" alt="" style="position:absolute; top:40px; left:0;" />
</div>
<div class="parallax-layer" style="width:1360px; height:320px;">
<img src="path/to/image-4" alt="" style="position:absolute; top:96px; left:0;"/>
</div>
</div>jQuery(window).load(function() {
jQuery('#parallax .parallax-layer')
.parallax({
mouseport: jQuery('#parallax')
});
});#parallax {
width: 100%;
height: 22em;
background-color: #aebcc9;
}
<div class="parallax-viewport" id="port">
<img class="parallax-layer" src="path/to/image-1" alt="" style="width:978px; height:325px;"/>
<img class="parallax-layer" src="path/to/image-2" alt="" style="width:987px; height:328px;"/>
<img class="parallax-layer" src="path/to/image-3" alt="" style="width:1001px; height:333px;"/>
<img class="parallax-layer" src="path/to/image-4" alt="" style="width:1031px; height:343px;"/>
<img class="parallax-layer" src="path/to/image-5" alt="" style="width:1067px; height:355px;"/>
<img class="parallax-layer" src="path/to/image-6" alt="" style="width:1120px; height:373px;"/>
<img class="parallax-layer" src="path/to/image-7" alt="" style="width:1200px; height:400px;"/>
</div>jQuery(window).load(function() {
jQuery('#port .parallax-layer')
.parallax({
mouseport: jQuery("#port")
});
});#port {
background: rgb(47, 49, 52);
margin: 0;
overflow: hidden;
position: relative;
height: 300px;
}
<div class="parallax-viewport" id="viewport">
<img src="images/1.png" alt="" class="layer_1"/>
<img src="images/2.png" alt="" class="layer_2"/>
<img src="images/3.png" alt="" class="layer_3"/>
<img src="images/4.png" alt="" class="layer_4"/>
<img src="images/5.png" alt="" class="layer_5"/>
<img src="images/6.png" alt="" class="layer_6"/>
</div><div id="mouseport"></div>jQuery(window).load(function() {
jQuery("#viewport > img").parallax(
{ mouseport: jQuery("#mouseport") },
{ xparallax: '6px', yparallax: '6px' },
{ xparallax: '12px', yparallax: '12px' },
{ xparallax: '30px', yparallax: '30px' },
{ xparallax: '54px', yparallax: '54px' },
{ xparallax: '84px', yparallax: '84px' },
{ xparallax: '120px', yparallax: '120px' }
);
});.button {
background: #2f3134;
float: left;
position: relative;
width: 60px; height: 60px;
margin: 3.2em 3.2em 0 0;
}
#viewport {
height: 22em;
position: relative;
background: #2f3134;
width: 100%;
border-radius: 12px;
border-radius: 12px;
}
#mouseport {
position: relative;
background: #2f3134;
width: 100%; height: 100%;
border-radius: 12px;
border-radius: 12px;
}
.layer_1 { position: absolute; width: 45px; height: 45px; z-index: 101; }
.layer_2 { position: absolute; width: 48px; height: 48px; z-index: 102; }
.layer_3 { position: absolute; width: 52px; height: 52px; z-index: 103; }
.layer_4 { position: absolute; width: 58px; height: 58px; z-index: 104; }
.layer_5 { position: absolute; width: 67px; height: 67px; z-index: 105; }
.layer_6 { position: absolute; width: 80px; height: 80px; z-index: 106; }<div id="thumbnail">
<ul class="thumbs_index index parallax-layer">
<li><a class="img_thumb thumb" href="#" style="background: url('path/to/1.jpg');">item</a></li>
<li><a class="img_thumb thumb" href="#" style="background: url('path/to/2.jpg');">item</a></li>
<li><a class="img_thumb thumb" href="#" style="background: url('path/to/3.jpg');">item</a></li>
<li><a class="img_thumb thumb" href="#" style="background: url('path/to/4.jpg');">item</a></li>
<li><a class="img_thumb thumb" href="#" style="background: url('path/to/5.jpg');">item</a></li>
<li><a class="img_thumb thumb" href="#" style="background: url('path/to/6.jpg');">item</a></li>
</ul>
</div>jQuery(window).load(function() {
jQuery('#thumbnail .parallax-layer').parallax({
mouseport: jQuery("#thumbnail"),
yparallax: false
});
});#thumbnail {
overflow: hidden;
position: relative;
height: 200px;
padding: 24px 64px;
}
.thumbs_index {
padding: 0 12px;
left: 0;
white-space: nowrap;
}
.thumbs_index > li {
display: inline;
margin-right: 12px;
}
.img_thumb {
padding-top: 120px;
width: 192px;
display: inline-block;
color: #FFF;
text-align: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}