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.

Background layer of full image
The gunship weapon image
The valley ground image
The fighter image layer
The forground ground image
The flying rocks image

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 class="parallax-layer" style="width:470px; height:320px;">
   <img src="/images/parallax/background-gunshiplayer.png" alt="The gunship weapon image" />
  <div class="parallax-layer" style="width:475px; height:325px;">
   <img src="/images/parallax/background-valleylayer.png" alt="The valley ground image" />>
  <div class="parallax-layer" style="width:492px; height:342px;">
   <img src="/images/parallax/shiplayer-512.png" alt="The fighter image layer" />
  <div class="parallax-layer" style="width:512px; height:384px;">
   <img src="/images/parallax/foreground-ridgelayer.png" alt="The forground ground image" />
  <div class="parallax-layer" style="width:482px; height:332px;">
   <img src="/images/parallax/foreground-rockslayer.png" alt="The flying rocks image" />

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;

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.