Ever hear of a guy named Ken Burns? Neither did I, until I came across this web site. Turns out Ken Burns employed a technique in video production that involved panning and zooming using still imagery, which is where the Ken Burns effect got its name. We can use this same technique in our open source digital signage Presentations.
body tag, while the link to the CSS can go in its usual place in the
<link rel="stylesheet" href="path/to/kenburns.css" />
You then need to add HTML inside your Placeholder that is similar to the following:
<img src="http://c803761.r61.cf2.rackcdn.com/KenBurns/01.jpg" alt="">
<img src="http://c803761.r61.cf2.rackcdn.com/KenBurns/02.jpg" alt="">
<img src="http://c803761.r61.cf2.rackcdn.com/KenBurns/03.jpg" alt="">
Just replace the image URLs with URLs to the images that you want to use and add as many as you like. This demo uses images that are 240x160. If you are using images with different dimensions, you are likely going to have to customize the CSS to make everything look just right.
Click here to see a live demo.