Create Cinemagraphs with CSS3 and jQuery

Cinemagraphs are great fun - a surprising blend between a static photograph and a video. They engage website visitors explicitly because they initially appear to be a regular photograph, but then they catch the viewer by surprise by moving subtly, and for a moment  your visitor is fully engaged with your page. First and foremost, cinemagraphs use the animated GIF format to capture the frames within the animation. This is a simple, portable and flexible way to create an animation, but as GIFs are strictly 8bit, the palette that can be reproduced is extremely limited.

As with any cinemagraph, the first stage is to identify and film your subject. Convert your footage to a suitable format that you can open in Photoshop, and make sure you’ve set your workspace to the Motion preset. You can select this by choosing Window > Workspace > Motion. Scrub through your video and locate a section no more than a second long to work as your animation. Once you’ve identified the bit of video you’d like to use, drag in the work-area handles on the timeline to mark the area you’re going to make your cinemagraph from.