In this short tutorial, we are going to make a OSX-like folder with CSS3, by utilizing 3D transforms, gradients and box shadows. In addition, we are going to use jQuery UI and its drag and drop interactions to build a pretty interactive demo.
Best jQuery Animation Plugins & Tutorials with Demo
jQuery Sprite : Plugin for Sprite (animation)
Sprite mainly thought of as a large image listed consecutive Figure 2D animation in game programming. Should be understood that the example below, one look at sprite.This plug-in and try to make this sprite animation control in the flash timeline, manipulating and found to be similar. If I knew in advance flash in the frame to provide a method borrows helps … later when it is time to control the timeline provided by the flash functions and methods as moving would like to see.
jQuery Path Bezier Curve Generator
The excellent jQuery.Path allows you to create custom pathing when using the jQuery animate function. Bezier curves are especially interesting, because they allow you to move an object along almost any conceivable path (especially when chaining animations together). To create a bezier path, you just supply the necessary parameters.
HoverEx : jQuery image hover animation plugin
HoverEx is a jQuery plugin for image hover animations.It contains over 36 animations and prepared 18 hover animation templates.It also support for image zoom and slider effect.You can use it to create unique animated effects effortlessly without any knowledge of jQuery.
Features:
- Over 36 animations
- Over 18 build-in templates
- Responsive able
- Easy to customize
- Include two version
- Build in 8 animate queue,and you can customize easy
- Inline Zoom Support. Can be set the zoom range and zoom change step.And mousewheel control support.
- Image Slider Support. Support mousewheel control,and pre/next buttons
jQuery TickBack : Plugin to animate the filtering of a list
A jQuery plugin to animate the filtering of a list.A proper jQuery version (1.8+), jQuery Transit (currently an unofficial unmerged fork with proper browser support). Also: the items in the list shoudl have the same dimensions. You specify on initial load of the plugin a callback function, which is used to determine if an element on the list should be filtered out.
jGravity : A jQuery plugin to Add Gravity to your Site
jGravity adds gravity to either all or specified elements within a page. Using the plugin is as easy as $(‘body’).jGravity(); which will use default settings to apply the gravity effect, which I think you will find quite similar to how Google presented ‘Google Gravity’ in an earlier Google easter egg.
I created this plugin because it simply didn’t exist. I wanted a gravity type of effect for a current project and searching was very frustrating with little results.
Roundbox : jQuery modal image plugin
Roundbox is a jQuery plugin to improve your image presentations on your sites. It comes with a cute effect when the user hovers upon the image and you can expand it with a simple and clean modal box without take the user away from your homepage.
Features:
- HTML5 and CSS3 crossbrowser support
- Perfect hover detection
- Builtin simple ModalBox
- Lighbox support
- Useful callback functions
- Fully customizable
- Smooth animations
- Easing effect included
- Images shown in the preview included.
