20 jQuery Plugins to Create Animating Image Effects

Sam Deering

jQuery can be very powerful and as you learn more about it you will be amazed what it is capable of doing. Today’s post is a collection of 20 jQuery plugins to create animating image effects on your site/blog. They could be very helpful to attract new visitors to stay on your page and reduce bounce rate or just for fun! Enjoy.

1. Photon : JS CSS 3D Lighting Engine

Photon is a experimental JavaScript CSS 3D Lighting Engine.

2. HoverTransitions – jQuery animated hover effects

Allows you to create numerous transition animation effects for webpage elements. The effects are performed by breaking the element into smaller boxes and animating the appearance of each of them according to different patterns and effects.

3. forkit.js : An animated GitHub ribbon

An experimental animated ribbon which reveals a curtain of additional content. See the top right corner! of the demo.

4. Nice Sparkle Progress Bars with jQuery & CSS3

Shiny Sparkle Progress bars with percentage label. The sparkles inside the bars are created using a combination of linear-gradient and radial-gradient as the background and then animated using the animation and keyframes properties.
Nice Sparkle Progress Bars
Source + Demo

5. JustGage : Animated Gauges in SVG & Raphaël library

A handy JavaScript plugin for generating and animating nice & clean gauges. It is based on Raphaël library for vector drawing, so it’s completely resolution independent and self-adjusting.
Source + Demo

6.: JZoopraxiscope

A jQuery plugin for making animations from static images inspired in Eadweard Muybridge’s Zoopraxiscope. Besides jQuery, it also uses jQuery UI and requires the frames to be animated as a single, horizontal image.

7. Mac OS X Lion with CSS3 & jQuery

This section is simply composed by a CSS3 keyframes animation. Login section mainly consists of a clock, two images (logos and avatars user name), two backgrounds and a password input field.
Mac OS X Lion

8. Slide-in backgrounds with jQuery

In this tutorial I’ll give you a quick run-down of how to go about creating this slide in effect.
Slide-in backgrounds

9. Zoom out share button with jQuery and CSS3

I set out to create an attention grabbing way to display buttons, and came up with this: a circle that expands revealing a bunch of share buttons on hover. Read on to learn out how to do it, and check out the demo!
Zoom out share button

10. jQuery flex

Fluid asymmetrical animated grid plugin.
jQuery flex

11. Gauge.js

100% native and cool looking animated JavaScript gauge.
Source + Demo

12. Rotating Feature Boxes with jQuery & CSS3

The full effect of it (with transition animations) will work in newish WebKit and Opera browsers and Firefox 4 above. Any other browser will rotate the blocks without transition animation.
Rotating Feature Boxes

13. ThumbFx : Responsive jQuery Thumbnail Effects

Enrich your website experience with ThumbFx, a jQuery animation plugin that brings your images and content to life. Create unique animated effects effortlessly without any knowledge of jQuery.

14. PullOuts : jQuery Slide-out Widgets

Allows to grab any piece of content from a web page and display it as a pullout widget. Whether it’s a block of text, images, shopping cart, login, search or subscription form, a video or any other content – you can make it a pullout.

15. Color animation jQuery-plugin

This plugin also adds rgba-colors, so now you can animate the transparency of the background and foreground text independently. Beware that Internet Explorer 8 and earlier don’t support rgba-colors.
Color animation jQuery-plugin
Source + Demo

16. Mac OS X Dashboard with jQuery

This is an example of the Mac OS X dashboard featuring drag and drop icons, 3D flip apps with jQuery. Tranforms and transitions are used to achieve the best effects.
Mac OS X Dashboard

17. jQuery Sort and Order Portfolio Plugin

Features :
> Extendable filter and order buttons.
> Customize CSS3 driven animation, graceful degradation.
> About 30 kinds animation transition style, different in easeIn and easeOut.
> Optional reverse order, you can set the order button support it or not.
jQuery Sort and Order

18. Horizontal bar graph with CSS3 and jQuery

Today we’ll create an animated, horizontal bar graph using jQuery, CSS3 properties (such as: gradients, border-radius, rgba) and CSS3 transitions.
Horizontal bar graph

19. SeuratJS : Raphaël plugin for beautiful pointillized Animations

A JavaScript library that extends Raphaël and allows for the creation of vivid animations and pixelated artwork using minimal code. It does this by extracting color data from an image of your choice and rebuilding the original with filled graphical primitives in SVG.
Source + Demo

20. JSTween : JavaScript animation library for jQuery

Designed from the ground up for speed and precision, allowing it to handle more simultaneous animations while maintaining a silky smooth frame rate. Animations in JSTween are kicked off by triggering the play() method.
Source + Demo