This project uses jQuery, a jQuery parallax library, and a series of PNG images layered on top of each other all at 700 wide X 465 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. This project only moves in the x-axis, and uses 11 images to make the effect.
On a tablet or iPad, tap the left or right corners of the image to move the view.
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:660px; height:450px;">
<img src="/images/parallax-2/Background.png" alt="Background layer of full image" />
</div>
<div class="parallax-layer" style="width:665px; height:450px;">
<img src="/images/parallax-2/background-2.png" alt="Background Storm Troopers" />
</div>
<div class="parallax-layer" style="width:670px; height:450px;">
<img src="/images/parallax-2/8-storm-troopers.png" alt="Rear storm troopers" />
</div>
<div class="parallax-layer" style="width:675px; height:450px;">
<img src="/images/parallax-2/7-dirt.png" alt="Dirt" />
</div>
<div class="parallax-layer" style="width:680px; height:450px;">
<img src="/images/parallax-2/6-sand.png" alt="sand" />
</div>
<div class="parallax-layer" style="width:680px; height:450px;">
<img src="/images/parallax-2/5-blast.png" alt="blast" />
</div>
<div class="parallax-layer" style="width:690px; height:450px;">
<img src="/images/parallax-2/4-kara-hunter.png" alt="Kara Hunter" />
</div>
<div class="parallax-layer" style="width:695px; height:450px;">
<img src="/images/parallax-2/4a-haze.png" alt="haze" />
</div>
<div class="parallax-layer" style="width:710px; height:450px;">
<img src="/images/parallax-2/3-sand.png" alt="sand" />
</div>
<div class="parallax-layer" style="width:700px; height:450px;">
<img src="/images/parallax-2/2-blaster.png" alt="blaster" />
</div>
<div class="parallax-layer" style="width:740px; height:450px;">
<img src="/images/parallax-2/1-trooper.png" alt="front storm trooper" />
</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: 650px;
max-width: 80em;
height: 450px;
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.