Galen Gidman has made a set of 30 CSS3 Progress Bars – each it’s own color. He is offering them as a 100% free download. Those progress bars were using no images what-so-ever… just CSS3. You can use them wherever you like, even in commercial projects.

You can also check out 2 Pure CSS Progress Bars with Animation we mentioned before. I am sure they will be useful when creating web applications.

Published under: Animation | License Free

jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It’s great to use as a hover effect or a way to direct attention to an element. You can control the X, Y, and rotation range, the speed, and event trigger for the rumble.

However, jRumble is currently a little buggy in Internet Explorer. A rumbleSpeed of 0 seems to break the rumble. Also, there is currently no rotation on any objects in IE. This plugin is free to use!

Published under: Animation | Framework | MIT License

1-Pure CSS Progress Bar

Two years ago, we have built a Javascript Progress Bar. Now, would you like a Pure CSS Progress Bar which requires one image for background stripes only? With simple Javascript for animation, it turned into a really simple and slick progress bar which you can use it anywhere on your website.

Pure CSS Progress Bar is best viewed in a Webkit based browser, Chrome is good, also Safari. Opera 10.62 looks quite good. Firefox and IE 9 kind of work (no animations). IE 8, 7 and 6 do not support rounding, shadows or animation.

2-Animated progress bar

CSS Globe has a chic animated progress bar built with CSS and an animated GIF file.

It is simply an EM tag above an animated GIF file which is blocking the part of the GIF file to creating the progress bar stop effect.

As this progress bar is only a visual trick, it can not show a "live" progress but only a static one which the percentage of progress to be shown was defined before the page is loaded.

Published under: Animation | Best Collections | Inspiration | License Free

The idea behind the ShineTime is to give your graphics the appearance of being on a glossy surface that have just had a light beam pass over them. This can make them appear to be made of glass and can increase the visual experience your end users see.

ShineTime is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass)  and the best part is, it’s not that difficult to achieve.

Published under: Animation | Gallery

gameQuery is a jQuery plug-in to help make javascript game development easier by adding some simple game-related classes. It’s still in an early stage of development and may change a lot in future versions. The project has a Google Code page where the SVN repository of the project is hosted and a twitter page where you can follow the daily progress of the development.

Published under: Animation | Framework | MIT License

jqDock Transform a set of images into a Mac-like Dock menu, horizontal or vertical, with icons that expand on rollover, and optional labels.

 

Published under: Animation | Menu | License Free

Cloud Carousel is a fast and cross-browser implementation of a 3d carousel – looks very nice, more like a Flash implementation. It can create dynamic reflections underneath the carousel items, is accessible and degrades nicely without JavaScript.

There are some benefits to doing this kind of thing in JavaScript rather than Flash, not least of which is the ease of integration, small file size, SEO, and inherent degradability/accessibility. Not having another dev-tool in the workflow is another plus.

Features:

  • Works with most browsers (tested on IE6+, Firefox, Chrome, Opera, Safari).
  • Accurate 3d perspective.
  • Optional auto reflections - no need to modify your images or add server code.
  • Easy integration with basic valid HTML and a tiny bit of JavaScript.
  • Small 5Kb (minified) script..
  • Degrades gracefully with Javascript turned off.
  • Fully accessible with no CSS or text only browsers.
  • Works with other plugins, e.g. Slimbox, and preserves your links and mouse events.
  • Optional mouse wheel support as of version 1.0.2.
  • It's completely free.

 

 

Published under: Animation | Gallery | MIT License

In this tutorial: Smooth Vertical or Horizontal Page Scrolling with jQuery we will create a simple smooth scrolling effect with jQuery. We will create a horizontal and a vertical website layout to show the effect. We will be using the jQuery Easing Plugin and just a few lines of jQuery.

 

Published under: Animation | License Free

jqIsoText is plugin for displaying your text with pseudo-isometric effect that will work without any additional CSS, but it can be easily custom styled.

This plugin can be implemented for text nods only.

jqIsoText is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

Published under: Animation | License Free

Fancy Sliding Form is a fancy sliding form that shows some validation feedback to the user after each step.

Fancy Sliding Form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images.

 

Published under: Forms | License Free | Validation | Animation