This project uses jQuery, a jQuery parallax library, and a series of PNG images layered on top of each other all at 512 wide X 384 high. The images
have transparent backgrounds so the layers in the background would show through the forground images. Moving the mouse over the image below
will cause the layers to move based on the location of the mouse, giving the image a 3D look to it.
The HTML code that you place in the BODY tag is as follows:
<div class="parallax-viewport" id="parallax">
<!-- parallax layers -->
<div class="parallax-layer" style="width:465px; height:315px;">
<img src="/images/parallax/Background-fullimage.png" alt="Background layer of full image" />
</div>
<div class="parallax-layer" style="width:470px; height:320px;">
<img src="/images/parallax/background-gunshiplayer.png" alt="The gunship weapon image" />
</div>
<div class="parallax-layer" style="width:475px; height:325px;">
<img src="/images/parallax/background-valleylayer.png" alt="The valley ground image" />>
</div>
<div class="parallax-layer" style="width:492px; height:342px;">
<img src="/images/parallax/shiplayer-512.png" alt="The fighter image layer" />
</div>
<div class="parallax-layer" style="width:512px; height:384px;">
<img src="/images/parallax/foreground-ridgelayer.png" alt="The forground ground image" />
</div>
<div class="parallax-layer" style="width:482px; height:332px;">
<img src="/images/parallax/foreground-rockslayer.png" alt="The flying rocks image" />
</div>
</div>
Here is the CSS code you place in the HEAD section of your HTML:
<style type="text/css" media="screen, projection">
.parallax-viewport {
position: relative; /* relative, absolute, fixed */
overflow: hidden;
}
.parallax-layer {
position: absolute;
}
.parallax-viewport {
width: 450px;
max-width: 80em;
height: 300px;
max-height: 80em;
background-color: #aebcc9;
margin:20px auto;
}
</style>
Then finally place THIS jQuery library at the bottom of your BODY tag, but before the closing BODY tag.
<script src="/Scripts/jquery.parallax.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#parallax .parallax-layer')
.parallax({
mouseport: $('#parallax')
});
});
</script>
If you want to use larger images make sure to increase the size of the images style for each layer, and increase the width and height in the CSS.
The graphics for this experiment were supplied by Steve Criado.