Development

How to make an animated thumbnail

By Ben Moss

December 10, 2012

Thumbnails are one of the purest pieces of usability the digital age has created. In essence a thumbnail is a preview, a promise of what you'll see if you click the link. A small glimpse with less data, faster to load and less greedy for screen real estate than the full-sized asset. They're ideal for images, but what about video?

Well, by extending a technique we already use for button states, we can create amazing animated thumbnails with basic CSS and a little jQuery.

How CSS sprites work

Nowadays, download speeds aren't such a problem for web developers. Of course, small file sizes are still desirable, but 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 request which is sent, processed and then returned. Check your console, 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 then selectively displaying different parts of that image using CSS.

Traditionally, for any button that we can't create with basic CSS styles, we'd create three states; an off, an over and a down:

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

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

Building this as a CSS sprite, we save all three images next to each other in a single file (so that instead of having three 200px wide images we have one 600px wide image) and change the position of the image using CSS's background-position property:

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

Think of the element as a window, through which you view the image. You can move the image around, but the window stays in the same position. Provided that you ensure that the element is the same size as the portion of the image you want to display the effect is seamless:

Building an animated thumbnail

The limitation of the CSS sprite technique above isn't the image, it's the number of different triggers we can use. We only have off (the default state), over and down.

However, by 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 can have on the screen:

The first thing we need to do is to stitch together some images. I'm going to be linking to this beautiful video of Western Norway at sunrise by Fuglefjellet, so I've screen-grabbed 10 key frames from a section of that video that I like and stitched them together into a single image using Photoshop.

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

Western Norway at sunrise

Next, we need to import jQuery in the head of the page:

Then we use jQuery to set the display type (block) the width (500px to match the width of one 'frame' of our image) the height (203px) and the background of our link:

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

Finally, we need to set the background so that the correct portion of our image is displayed; each 'frame' is 500px wide, so to show the first frame the x position of the background image should be 0px, to show the second it will be -500px, the third will be -1000px and so forth.

Using a mousemove handler function, we can calculate the relative position of the cursor over the element as a percentage; we subtract the element's offset position from the event's pageX (this treats the left edge of the element as 0), then divide by the width of the element.

Having done so we calculate the position of the background image by multiplying the percentage position by the total size of the composite image. We need the final result to be multiples of the element width (500px) so we divide the result by that value, round down using Math.floor(), then multiply back up to cancel out the division; if we don't do this the image will simply scroll 1px at a time.

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

Then we apply the background-position with CSS:

.mousemove(function(e) {
 var elementWidth = 500;
 var mousePercent = (e.pageX - this.offsetLeft) / elementWidth;
 var bgPosition = 0 - Math.floor((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-8" />
 <title>demo</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 $('#preview')
 .css('display', 'block')
 .css('width', 500)
 .css('height', 203)
 .css('background', 'url("landscape.jpg") no-repeat')
 .mousemove(function(e) {
 var elementWidth = 500;
 var mousePercent = (e.pageX - this.offsetLeft) / elementWidth;
 var bgPosition = 0 - Math.floor((mousePercent * 5000) / elementWidth) * elementWidth;
 $(this).css('background-position', bgPosition + 'px 0px');
 });
 });
 </script>
</head>
<body>
 <a href="https://vimeo.com/8736190" id="preview">Western Norway at sunrise</a>
</body>
</html>

Conclusion

There are a couple of things to consider: firstly, it would be possible to set up a thumbnail with hundreds of 'frames', but whilst that will lead to very smooth animation, it will also take a long time to load; secondly, the mouse position detection simply isn't going to work on a touchscreen device, so 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 about what lies at the other end of a link, and when the resource you're linking to is a video, a single image is often not enough information. Extending the CSS sprite technique is a simple, effective way to preview more than a single frame.

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