Ken Burns Effect in Javascript

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.

To use this effect, download the Javascript file and the CSS file. Create two <div> tags within your HTML that occupy the same area. In the example, these <div> tags take up the entire screen.

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.

Next steps
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.

4 Responses to “Ken Burns Effect in Javascript”

  1. Catto Says:

    Hey Now Micheal,

    This pix look great, & the web part in SharePoint is a great idea.
    Thx,
    Catto

  2. Constantin TOVISI Says:

    Hi,

    I've got to your site from Google, searching for a Ken Burns JavaScript script.

    I'm considering using if for a personal project, actually my personal blog.

    I was wondering though if there is a way to prevent the script from downloading the next "slide" picture again, but cache it somehow in the browser, after it was used the first time.

    Anyways, great script and thank you for sharing it,
    constantin TOVISI

  3. Tobias Musterwalze Says:

    Hello, iw want to use the script in a commercial website ... ist that allowed? Do i need to pay something for it? Thanks for sharing your information and have a nice day!

  4. Michael L Perry Says:

    Commercial use is allowed. Use it however you like.

Leave a Reply

You must be logged in to post a comment.