Jquery animation 1 - panning

Here is a simple demonstration of jquery-powered animation. We'll start with the simplest type of animation - panning.

This technique was the workhorse of Ken Burns' documentaries of the Civil War, and for my demo I am using an 1864 photo (fron the Library of Congress) of sailors on the deck of the gunship U.S. Mendota.

The first thing we need is a viewport - this is the "screen" where the animation will be shown. The overflow is set to "hidden" so only the part of the photo inside the viewport is shown. The second part styles the control divs under the viewport.

  div#viewport{ 
    width: 400px;
    height: 300px;
    margin: 10px;
    border: 2px solid #555;
    background-color: #ccc;
    overflow: hidden;
  }

  div.control {
    width: 80px;
    padding: 10px;
    margin: 10px; 
    float: left;
    background-color: #ddd;
    border: 1px solid #888;
    text-align: center;
    font-weight: bold;
    color: #888;
    cursor: pointer;
   }

In the HTML section of the code, I place the photo and two controls, one to start the pan, one to reset.

<div id="viewport">
    <img src="mendota-crew-1864.jpg" alt="U.S. Mendota 1864" />
</div>
<div class="control" id="pan">Pan</div>
<div class="control" id="reset">Reset</div>

The top and left positions of the image are set in the CSS. This will be the starting point of our panning action.

  div#viewport img{ 
    position: relative;
    top: -380px;
    left: -900px;
  }

Now, to pan to the left, all that needs to be changed is the left position of the image. The div "pan" is the target of the click that starts the pan. The div "reset" simply sets the left property of the image back to what it started at.

Note that both the animate method and the ccs method are only changing the "left" property of the image. The only difference is that the animate method does it gradually - over the span of 12 seconds or 12,000 milliseconds.

Here's the jquery code:

<script>
  $('div#pan').click(function() {
    $('#viewport img').animate({'left': '-280px'}, 12000);
  });
</script>

<script>
  $('div#reset).click(function() {
    $('#viewport img').css('left', '-900px');
  });
</script>

Next time I will explore a method for another basic animation technique, zooming.