How To Thumb Nails For Animations

Thumbnails are 1 of the purest pieces of usability the digital historic period has created. In essence a thumbnail is a preview, a hope of what you'll run into if you click the link. A small glimpse with less data, faster to load and less greedy for screen existent estate than the full-sized nugget. They're ideal for images, only what about video?

Well, past extending a technique nosotros already employ for push button states, we tin can create amazing animated thumbnails with basic CSS and a piffling jQuery.

How CSS sprites piece of work

Nowadays, download speeds aren't such a problem for spider web developers. Of course, pocket-sized file sizes are still desirable, just the real performance hit on most sites is the number of HTTP requests. Each time your site loads an asset, the browser makes an HTTP asking which is sent, processed and then returned. Check your panel, you'll see that much of the delay on your site is nothing to do with image size, it's spent waiting for a server response.

The solution is the CSS sprite technique; stitching multiple images into a single image file and and then selectively displaying different parts of that epitome using CSS.

Traditionally, for whatever button that we tin't create with bones CSS styles, we'd create three states; an off, an over and a downwards:

            .button{     groundwork:url('off-state.png'); } .button:hover{     groundwork:url('over-state.png'); } .button:active{     background:url('downwardly-state.png'); }

This would lead to 3 images being downloaded from the server and generate three HTTP requests.

Building this as a CSS sprite, nosotros salve all three images next to each other in a single file (and so that instead of having 3 200px wide images we accept 1 600px wide image) and change the position of the image using CSS'south background-position belongings:

            .button{     display:block;     width:200px;     elevation:83px;     background:url('push-states.jpg'); } .push button:hover{     background-position:-200px; } .button:active{     groundwork-position:-400px; }

Think of the chemical element as a window, through which you lot view the prototype. You can movement the paradigm around, but the window stays in the same position. Provided that y'all ensure that the element is the same size as the portion of the image yous desire to brandish the outcome is seamless:

Building an animated thumbnail

The limitation of the CSS sprite technique in a higher place isn't the image, it'south the number of dissimilar triggers we can utilize. Nosotros merely have off (the default state), over and down.

However, past plugging in a little jQuery we can use the position of the cursor to determine as many different trigger points as we like — or more accurately, as many different cursor positions as we tin can have on the screen:

The first thing we demand to do is to sew together together some images. I'm going to be linking to this beautiful video of Western Kingdom of norway at sunrise by Fuglefjellet, and then I've screen-grabbed x key frames from a department of that video that I like and stitched them together into a single image using Photoshop.

Image composit

Now that the image is set, the second thing nosotros need to do is create a simple HTML file with a link to the video nosotros're creating the thumbnail for:

            <a id="preview" href="http://vimeo.com/8736190">Western Norway at sunrise</a>

Side by side, nosotros need to import jQuery in the head of the folio:

                          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>

And so we utilize jQuery to prepare the display type (block) the width (500px to match the width of ane 'frame' of our image) the summit (203px) and the groundwork of our link:

            $(document).ready(part() {     $('#preview')         .css('display', 'block')         .css('width', 500)         .css('height', 203)         .css('groundwork', 'url("our-image.jpg") no-repeat'); });

Finally, we demand to set the background then that the correct portion of our image is displayed; each 'frame' is 500px wide, so to show the offset frame the x position of the groundwork epitome should be 0px, to show the 2d information technology volition exist -500px, the third will be -1000px and then forth.

Using a mousemove handler function, we tin can summate the relative position of the cursor over the element equally a percentage; nosotros decrease the chemical element'due south offset position from the consequence's pageX (this treats the left edge of the chemical element every bit 0), then divide by the width of the element.

Having done so we calculate the position of the groundwork image by multiplying the percentage position by the full size of the blended image. We need the final result to be multiples of the element width (500px) so we divide the issue by that value, round downwardly using Math.floor(), then multiply back upwards to cancel out the division; if nosotros don't practice this the image volition simply scroll 1px at a fourth dimension.

We subtract the resulting value from 0 so that all possible values are negative.

So nosotros use the background-position with CSS:

            .mousemove(function(e) {     var elementWidth = 500;     var mousePercent = (e.pageX - this.offsetLeft) / elementWidth;     var bgPosition = 0 - Math.flooring((mousePercent * 5000) / elementWidth) * elementWidth;     $(this).css('background-position', '-' + bgPosition + 'px 0px'); });

The full script looks like this:

            <!DOCTYPE html> <html lang="en"> <head>     <meta charset="utf-eight" />     <championship>demo</title>     <script src="http://ajax.googleapis.com/ajax/libs/jquery/ane.8/jquery.min.js" blazon="text/javascript"></script>     <script type="text/javascript">     $(document).ready(part() {         $('#preview')         .css('display', 'block')         .css('width', 500)         .css('acme', 203)         .css('background', 'url("landscape.jpg") no-repeat')         .mousemove(function(e) {             var elementWidth = 500;             var mousePercent = (due east.pageX - this.offsetLeft) / elementWidth;             var bgPosition = 0 - Math.floor((mousePercent * 5000) / elementWidth) * elementWidth;             $(this).css('background-position', bgPosition + 'px 0px');         });     });     </script> </head> <torso>     <a href="http://vimeo.com/8736190" id="preview">Western Kingdom of norway at sunrise</a> </body> </html>

Determination

There are a couple of things to consider: firstly, information technology would exist possible to set up a thumbnail with hundreds of 'frames', but whilst that will atomic number 82 to very smooth animation, it will besides take a long time to load; secondly, the mouse position detection merely isn't going to work on a touchscreen device, then whilst this technique won't actually harm usability on a mobile device you aren't gaining anything either.

The purpose of a thumbnail is to present the user with more information almost what lies at the other end of a link, and when the resource you're linking to is a video, a single image is ofttimes non enough information. Extending the CSS sprite technique is a uncomplicated, constructive way to preview more than than a single frame.

How do you preview video in thumbnails? Do you use more than a unmarried image? Let us know in the comments.