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. However, the label for percentage is animated using jQuery.
Best jQuery Animation Plugins & Tutorials with Demo
Nice Sparkle Progress Bars with jQuery & CSS3
JustGage : Animated Gauges in SVG & Raphaël library
JustGage is 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 independant and self-adjusting.
Oh yes, since it’s pure SVG, it works in almost any browser – IE6+, Chrome, Firefox, Safari, Opera, Android, etc.
jQuery Animated Responsive Image Grid
A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.The idea is to have a list of images and define the number of columns and rows which will arrange the images into a grid. The remaining images will appear with different animations and delays. With some sizing options we can define how the grid should be laid out for different screen widths.
This kind of component can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.
Animator jQuery Script
“Animator” gives you the possibility to animate almost every single HTML element on the page.It can’t be easier to do. Just add a class called “animate” + <<animation name>>
Sometime you will need to do the animation faster. So, only add another class called “quick” and it will reduce the animation time.You have 50 different animations to choose. 29 to appear HTML elements and 21 disappear animations.Also I’ll give you a javascript function, to control the animation flow. Even if you don’t know anything about javascript, you will be able to change the animations in real time.It works amazing on iPhone, iPad and some other mobile devices.
Also works in Chrome, Opera, Firefox. IE is not supported yet, but still perform the enter and exit animation.
JZoopraxiscope : jQuery plugin for making animations from static images
JZoopraxiscope is 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.It all works by calling a simple function where we define dimensions of the images and the frame.
After that, JZoopraxiscope works with the help of play and pause buttons provided.Although it looks hard to use the resource widely, with a bit help of creativity, it can beautify a web page easily.
Mac OS X Lion with CSS3 & jQuery
I wanted to create with only use of CSS3 the boot, the login page and finally the desktop of the Mac OS X Lion.Booting page is simply the Mac OS X Lion boot. 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. I used javascript only for the clock, create a fake login and when the password is valid I added some class to fix the desktop section and remove permanently the section login animation.And at last their is a desktop here I use javascript only for the clock and the jQuery UI Draggable library to have a draggable windows.
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.There are a few things we want to accomplish. The code I provide below is just a quick roundup of how this effect is accomplishable. I do plan to turn this into a plugin at a later date with a much wider breadth of applicability.
- Firstly we must generate the ‘slices’ in Javascript. This will be determined by screen width and will have to change as the user resizes their window.
- Next we need the slices to slide in. We can do this with animations, but we don’t want the animations to queue in such a way that it ruins the effect
- We want the slices to reset when another animation comes on top of it.
- The slices should be positioned absolutely so content can be placed on top if it.
MetroPanel – Navigator for Modern Sites with jQuery,Html5 & Ajax
MetroPanel is new navigator system for modern sites with following features
Features:
- Two Panel Position: left and right
- Unlimited Items
- Unlimited background
- AJAX + HTML5 smart load for SEO
- jQuery + CSS3 Animation Effects
- Auto Show or Auto Hide Panel
- Easy Deploy for Almost Sites
- Many Options for Custom
Zoom out share button with jQuery and CSS3
When it comes to attracting attention to yourself on the internet, nothing does a better job than share buttons. Whether its twitter or google plus, social media probably has a huge impact on your traffic. 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!
