Sprite

6 articles

Sprite Based Animations And Panning jQuery Plugin: Motio

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…

CSS Spritemap Generator: Spritemapper

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…

Visual CSS Background Sprites Generator: Sprite Cow

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…

Generate CSS Sprites on the Fly: Lemonad

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…

Character And Background Sprite Animations: jQuery Spritely

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…

Combine Background Images Into A CSS Sprite: SpriteMe

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…