A Javascript Experiment - Movement

April 2, 2006

After a friday spent researching alternative interfaces, (after being challenged by James), I've developed a nice little Javascript class which allows you to re-create a popular shifting effect, used to great effect on sites such as One Digital. I've created an example of the script in action showing the London tube map being shifted around.

Install the Javascript object using the following code. The parameters passed are the name of the div you wish to shift and the number of horizontal/vertical stops in the grid. The Javascript deals with moving the target div into the middle of the page so alternative styling can be used if Javascript is not available. It also divides the page up into a grid of ‘stops’ for navigating around.

<script type="text/javascript" src="includes/js/prototype.js"></script>
<script type="text/javascript" src="includes/js/movement.js"></script>
<script type="text/javascript">
  movement = new Movement("shiftMe", 9, 6);
</script>

The CSS is fairly self-explanatory. The target div needs to be given a width and height to be divided up but the nav can be styled however you want.

div {
  background: transparent url("../images/bg-content.gif") 0 0 no-repeat;
  border: solid 3px #27B1E6;
  height: 2048px;
  position: absolute;
  width: 3074px;
}

The script uses prototype, (as all good Javascripts do), and has been tested and works in IE 6, IE 7 Beta 2, Firefox and Safari. Download it and have a play.