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.

Background layer of full image
Background Storm Troopers
Rear storm troopers
Kara Hunter
front storm trooper

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 class="parallax-layer" style="width:665px; height:450px;">
   <img src="/images/parallax-2/background-2.png" alt="Background Storm Troopers" />
  <div class="parallax-layer" style="width:670px; height:450px;">
   <img src="/images/parallax-2/8-storm-troopers.png" alt="Rear storm troopers" />
  <div class="parallax-layer" style="width:675px; height:450px;">
   <img src="/images/parallax-2/7-dirt.png" alt="Dirt" />
  <div class="parallax-layer" style="width:680px; height:450px;">
   <img src="/images/parallax-2/6-sand.png" alt="sand" />
  <div class="parallax-layer" style="width:680px; height:450px;">
   <img src="/images/parallax-2/5-blast.png" alt="blast" />
  <div class="parallax-layer" style="width:690px; height:450px;">
   <img src="/images/parallax-2/4-kara-hunter.png" alt="Kara Hunter" />
  <div class="parallax-layer" style="width:695px; height:450px;">
   <img src="/images/parallax-2/4a-haze.png" alt="haze" />
  <div class="parallax-layer" style="width:710px; height:450px;">
   <img src="/images/parallax-2/3-sand.png" alt="sand" />
  <div class="parallax-layer" style="width:700px; height:450px;">
   <img src="/images/parallax-2/2-blaster.png" alt="blaster" />
  <div class="parallax-layer" style="width:740px; height:450px;">
   <img src="/images/parallax-2/1-trooper.png" alt="front storm trooper" />

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;

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')
    mouseport: $('#parallax')

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.



Story Archives


Welcome to

I'm going to be up front here about, this site is in no way connected to me selling a book I wrote, plastering the pages with ads to click on, or in no way making me any money.

The whole purpose of this site is to show people things I love to do, display my photography skills (or lack of), and experiment with new web technologies.

It’s also a place for me to jump on my soapbox and rant about the way the programming world is changing. In my Blog there are programming tips on coding JavaScript, and soon other langauges.