20 jQuery Plugins to Create Animating Image Effects
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.
SourceDemo
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.
SourceDemo
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.
SourceDemo
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.
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.
SourceDemo
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.
SourceDemo
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.
SourceDemo
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!
SourceDemo
10. jQuery flex
Fluid asymmetrical animated grid plugin.
SourceDemo
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.
SourceDemo
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.
SourceDemo
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.
SourceDemo
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.
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.
SourceDemo
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.
SourceDemo
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.
SourceDemo
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
