How to make an animated thumbnail

Ben Moss.
December 10, 2012
How to make an animated thumbnail.

ThumbnailThumbnails 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.

Image composit

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="http://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="http://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.

Ben Moss

Ben Moss is Senior Editor at WebdesignerDepot. He’s designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. One of these days he’ll run a sub-4hr marathon. Say hi on Twitter.

Read Next

Are Simple Websites Better For Business?

As web design technologies raise the bar on what it is possible to achieve on a realistic budget, there’s a rising deba…

Apple Opts for AR over VR at WWDC

An Apple VR headset has been one of the most widely-rumored devices of the last few years, and it was finally settled a…

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …