Create high quality cinemagraphs with CSS3 and jQuery

Create high quality cinemagraphs that offer a richer range of colours and a larger set of dimensions than the usual animated GIF options, by using JPEG sprites with CSS3 and jQuery.In this tutorial we’ll show you how to create a full screen-capable cinemagraph using a different technique. Instead of rendering our animation using GIF, we’ll create a sprite using JPG as the format, allowing us to scale up our artwork to practically any size, and render a full spectrum of colour. You’ll learn how to break video into individual frames, arrange the frames into a single sprite that loads efficiently in the browser, and use CSS3 (with jQuery as a backup) to flip between the frames, creating a rich, high-quality cinemagraph.