Parallax is the phenomenon in which objects that are further away appear to move slower than objects that are closer. This can give an interesting 3D effect to websites. Our client Liqupel makes a waterproof nano-coating for mobile devices. While we were developing the rest of the site, they wanted to create a splash page (get it?) to drive traffic to and create buzz around. The designers wanted a cool 3D effect and we were able to get it through using some fairly simple Javascript and CSS

The Parallax Effect

First, let me show off how it turned out. The splash page served its purpose and is no longer “live” but we put up a demonstration of what it was like on our site. Liquipel Parallax Demonstration. Notice as you move your mouse, the background moves too. Also notice that there are distinct layers that move at different speeds.

Layer Creation

To create this effect, there needs to be different layers. We simply used one large png file for each layer. You can view the individual layers here:

• Parallax layer 1
• Parallax layer 2
• Parallax layer 3
• Parallax layer 4

<div class="parallax">
    <div class="water water-layer4"></div>
    <div class="water water-layer3"></div>
    <div class="water water-layer2"></div>
    <div class="water water-layer1"></div>
</div>

.parallax {
  position: absolute;
  width: 100%;
  height: 1090px;
  overflow: hidden;
  left: 0;
}
.water {
  position: absolute;
  width: 100%;
  height: 1090px;
  left:0;
  background-repeat: no-repeat;
  background-position: top center;
}
.water-layer1 {
  background-image: url(../images/water-layer-1.png);
}
.water-layer2 {
  background-image: url(../images/water-layer-2.png);
}
.water-layer3 {
  background-image: url(../images/water-layer-3.png);
}
.water-layer4 {
  background-image: url(../images/water-layer-4.png);
}

We put those layers in an absolutely positioned div that was set to the height of the images and 100% width. Inside this div was four other divs, also set to the height of the images and 100% width. The background of each of these divs are the individual images, each set to background-position: top center. This keeps them centered on the page, no matter how wide the browser is.

The Javascript

This requires jQuery, so be sure to include it.

var currentX = '';
var movementConstant = .015;
$(document).mousemove(function(e) {
  if(currentX == '') currentX = e.pageX;
  var xdiff = e.pageX - currentX;
  currentX = e.pageX;
  $('.parallax div').each(function(i, el) {
      var movement = (i + 1) * (xdiff * movementConstant);
      var newX = $(el).position().left + movement;
      $(el).css('left', newX + 'px');
  });
});

In this implementation, we're only changing the image based on the x position of the mouse, although I've seen implementations that use both the x and the y position. First, we need a global variable to store the last mouse position. Then we use an event handler to listen for mouse movement. This will compare the last position with the new position and get the difference. With that difference, we loop through each div, preform the movement calculation and apply it to that div.

Movement Calculation

var movement = (i + 1) * (xdiff * movementConstant);

This is where we really calculate the parallax effect. We loop through each div using the jQuery.each() function, which allows us to assign an iterative key (i) to each element (el). Because we'll multiply the movement by each iterative key, each layer will move a different amount. The second layer will move twice as much as the first, the third will move three times, etc. If you want to bottom layer to remain stationary, you could change it to i * (xdiff * movementConstant). Becuase the interative key starts at zero, the bottom layer won't move at all.

The amount the layers move is determined by the movementConstant variable. If it's one, the bottom layer will move as much as the mouse does, the next layer twice as much, etc. This effect is way to much, so we toned it down, trying different numbers until we came to .015, which seemed to work perfectly for the effect we were looking for.