Motio is a free jQuery plugin for simple but powerful sprite based animations and panning.

Motio is called on an element representing animation container, where animation is delivered as a CSS background image.

In sprite based animations, container should have the dimensions of one sprite frame. E.g, if you have 10 frames in a horizontal sprite that is 100 x 100 pixels big, the container should be 100 x 100 pixels big.

In panning, container size doesn’t play any role, just the background image should be seamless (depends on your req.).

If you are optimizing a website for speed, one of the major changes that I would recommend is combining images into sprites. Not all of them, of course. I usually convert small images that are called very frequently such as images used in navigation menus, images and header, footer or side bar (social media icons, for instance), dividers, link buttons etc. This saves precious HTML requests backs to the server.

There are a number of sprite generators like Sprite Cow. Today’s feature sprite generator is Spritemapper. This simple but effective tool merges multiple images into one and generates CSS positioning for the corresponding slices.

Spritemapper ensures that the images are packed tightly – the result is crisp and light image sprite. The tool, itself, is a simple command-line program powered by a Python library including its own PNG and CSS parser.

Sprite Cow is a visual tool for generating CSS background sprites. Okay, cool! But what is a sprite? I knew those old school designers (still slicing their large images) would ask this question. A sprite is a big block of small images that loads in to the Web browser once and might be used to displays many different images at once or different states of a single image on events like mouse over. The reason is simple – a sprite loads just once and thus sends only one HTTP request opposite to old school sliced images each sending one HTTP request separately.

This CSS background sprites generator saves a lot of designer’s time that get wasted when they copy all the positions and sizes from graphics applications.

The technique of stitching many images into a larger image is called CSS Sprite and it saves you many network calls for your image assets.

CSS Sprites is one of the best way to optimize your stylesheets and improve your site performance. Greepit has shared couple of useful resources that can help you create CSS sprites.

• Combine Background Images Into A CSS Sprite: SpriteMe
• Handle Base 64 Data URIs In Stylesheets: Spritebaker

Lemonade, a Sass/Compass plugin, is incredibly easy to use CSS sprite generator. It needs no configuration, no Rake task, no Photoshop, just a little change in your Sass or SCSS files.

It generates a sprite image for each folder (e. g. “bottles” and “cans”).

jQuery.spritely is a jQuery plugin for creating dynamic character and background animation in pure HTML and JavaScript. Its a great alternative to Flash if your desired platform does not support Flash.

It’s a simple, light-weight plugin which adds sprite() and pan() to your objects. With few simple methods, you can create animated sprites such as flying birds and dynamic scrolling backgrounds.

It can be used on any html web page, and any part of the page can interact with a sprite. It works well on iPhone / iPod Touch and iPad.

A sprite combines multiple background images into a single image. This is a technique for making web pages faster because it reduces the number of downloads in the page.

Background images make pages look good, but also make them slower. Each background image is an extra HTTP request. There’s a fix: combine background images into a CSS sprite. But creating sprites is hard, requiring arcane knowledge and lots of trial and error.

SpriteMe removes the hassles with the click of a button.

• Finds background images
• Groups images into sprites
• Generates the sprite
• Recomputes CSS background-positions
• Injects the sprite into the current page

There are four buttons on this example, each of which has three states. That would normally be 12 images (thus 12 server requests), but thanks to the CSS sprites technique it is only one. The technique is demonstrated practically in the form of an accordion widget.

Demo

Download