Using jQuery for Background Image Animations
After reading Dave Shea’s article on CSS Sprites using jQuery to produce animation effects, I felt like playing around with things to see what could be done but accomplish it with a simpler HTML structure (no need for adding superfluous tags) and simpler code, too.
Changing the position of the background image felt to be the best approach to creating the type of effect we’re looking for (and I’m not the first to think so: see the examples at the end of this article).
Related Submissions:
- jAni – jQuery Plugin for Cartoon-like Background Image Animation jAni is a simple plugin for jQuery which allows you animate background images. The plugin is basically an alternative to the animated GIF but with...
- CSS Spriting without background-image Jennifer Semter has published an article on CSS spriting, and a cross-browser technique that uses divs, anchors, and clipping to get the same effect as...
- Framing an Image I’m not sure exactly how well known it is, but you can put a background image on any HTML element… even an image. I don’t...
- Blurry Background Effect When setting a background image on a page element with CSS, you can control its position with “background-positionâ€, but an often-forgotten trick is that you...
- Mastering CSS background-position We will learn how to use the CSS property background-position to create different kind of buttons, interfaces and more by using only one image as...