Cinemagraph with JavaScript and PNG

What is a cinemagraph? -------------------------------- A cinemagraph combines photography and video to ‘unfreeze’ a photo very subtly, capturing the moment just before and after a still is taken. The more subtle the movement in the frame, the more effective it becomes. “More than a photo, but not quite a video”: See some examples here: [login to view URL] [login to view URL] [login to view URL] [login to view URL] What’s different about ours? ------------------------------------- We’ve shot a series of cinemagraphs along the length of a street. We want to join them together and pan along the entire street within a 16x9 frame, giving the impression that we have created a really epic cinemagraph. We also want to play a music track while the image pans. The challenge – build our cinemagraph ---------------------------------------------------- Image format / animation: In this instance, due to the size of the panoramic image being created, the animated GIF format would be impractical as the file size would be huge. We therefore would like to use a combination of layered PNG images and JavaScript to create a similar effect. We’d like to create a container (using a DIV or similar) that looks like a normal 16x9 animated GIF, but actually acts as a mask for our content. We’ve shot our street scene, and all the assets are currently being prepared in PNG format. There are two layers of images – a static background layer made up of 19 separate PNGs, and animated sections that fit over that layer. These sections are cropped so that we only need to load the portion of the image necessary to display the animation. There is also a static PNG at the very end of the sequence containing some graphics to do with the project - we'll supply this. We’ll supply a guide showing which animated sequences fit where in terms of layering over the background images. Preloading: We’ll need to pre-load a certain amount of content before the music can start and the image can begin panning from left to right. We'll need to display a preloading message while this is happening. We'll provide a design and artwork assets for this. The amount of content we’ll need to load in advance will be dependent on the user’s connection speed. We’ll need to load enough of the background segments and animated overlays to allow the image to start panning, and continue to the end uninterrupted. We also want to play the audio track, so we’ll need to buffer enough of that so it will also begin playing when the image starts panning, and will continue uninterrupted (Obviously this assumes a reasonably consistent connection speed). Scaling to fit desktop and mobile ------------------------------------------- We’d like this project to work on both desktop and (popular) mobile browsers. The frame size for desktop / tablet should be 960 x 540, and we should display a scaled down version for mobile devices – this frame size should be 560 x 315. Browser compatibility ---------------------------- The piece needs to work in all modern browsers both on the desktop and on mobile devices: Desktop: IE8+ Firefox Safari Chrome Mobile: Mobile Safari (iPhone and iPad) Android (phones and tablets)