The Ken Burns Effect is a popular way of adding emotional appeal to a slide show. It is named after the documentary film director who used it extensively in his series on the American Civil War and Baseball. It is used in the default OS X screen saver. It even makes an appearance as a presentation technique in the 2006 Tom Hanks movie The Da Vinci Code. I thought this would be a fantastic way to showcase photos in the web.
You can see the result with some family photos. I've included photos of all sizes, aspect ratios, and image qualities. This shows off the versatility of the code, but also demonstrates the tradeoffs between quality and speed. I should warn you that image processing in the browser is quite taxing on the client machine. This looks great on my MacBook Pro, but is not so smooth on a less expensive laptop. Flash or Silverlight would be a better choice for client technology.
Fill an array with the URLs of the images to display. You can optionally pass this list to the randomizeList function to shuffle it. Then call the startSlideshow function with this list and the IDs of the two <div> tags. Show source on the example page for more details.
How does it work
The effect uses the setTimeout function to schedule animation steps. It breaks down the animation into fading and panning. The panning is controlled by an object that converts a time index parameter into offset and size. A set of linear equations determine these properties, so that the effect is a smooth transition from one zoom rectangle to another.
The coefficients of these linear equations are determined randomly such that the beginning and ending points are within the bounds of the picture. Because the equations are linear, all points in between are also within bounds. The aspect ratio of the original image is preserved.
The most interesting part of this project was getting the CSS manipulation correct. The images use "position: relative" to indicate that they move relative to their natural resting place. This allows the containing <div> to crop them to fit. But this also means that the images could not coexist within one <div>. Relative positioning is affected by layout, so the second image would be offset by the size of the first.
I've already created a SharePoint view of a picture library using this effect. I plan to package that as a web part and post the code here. I also plan to write code to extract images from Flickr library.
If someone beats me to it, just post a link to your code in the comments. I'll be sure to promote it to a post so that everyone can enjoy.