[转载]20+ Stunning jQuery Animations

A little bit of animation can spruce up a dull user interface. Thiscollection of jQuery Animations pull up a whole new style ofinteractivity through stunning animations and effects.

1. Make Your Header Responses To Mouse Movements With JParallax

JParallax is no news to jQuery lovers. For those who still dont knowanything about it. Here is a little introduction. jParallax turns aselected element into a window, or viewport, and all its children intoabsolutely positioned layers that can be seen through the viewport.These layers move in response to the mouse, and, depending on theirdimensions (and options for layer initialisation), they move bydifferent amounts, in a parallaxy kind of way. Next, I will show youhow to make a beautiful

2. Creating A Funky Parallax Scrolling Background With jQuery

In this jQuery tutorial, you will learn how to construct a ParallaxScrolling background ? first popularized in web interfaces with the useof Flash. The technique involves div elements with CSS backgroundimages. The Parallax Scrolling technique requires the scrollTo pluginby Argentinean Web Developer and Game Programmer, Ariel Flesler.

3. jQuery Solar System

A splendind 3d jQuery animated solar system. A must see for all jQuery lovers.

4. Simulate Gravity With jQuery

A simple tutorial to Simulate Gravity With jQuery.

5. Auto-Moving Parallax Background

A while back I did a little demo on parallax backgrounds. As a quickreview, parallax is that effect where there are different layers ofbackgrounds that all move at a different rate creating a very unique 3Deffect (think Sonic the Hedgehog). In that original demo, the only wayto see the parallax action take place was resize the browser window. Sonow we have an Auto-Moving Parallax Background with jQuery.

6. Fully Executing jQuery Animations Without Queuing

This amazing jQuery tutorial explains how to create fully Executing jQuery Animations Without Queuing.

7. Animated Header Using jQuery

This animated tutorial goes over a similar concept to the youlove.usexample of vertically moving a large CSS background image.Illustrations on how the technique works will help readers grok theconcept more fully. Devirtuoso, the author of the tutorial, goesthrough due diligence by offering an IE6 hack for backwardscompatibility.

8. Multiple Animations With jQuery

Glimmer, a JavaScript animation creation tool that leverages thejQuery library, has several live demonstrations for some of the thingsyou can do with the app. For instance, with Glimmer, you can createcool animation sequences or make a spiffy and impressive rotatingbanner for your website.

9. CSS Transitions via jQuery Animations

A wonderful and trendy tutorial on creating CSS Transitions via jQuery.

10. jQuery Animations: A 7-Step Program

A dash of animation can spruce up a dull interface. In this tutorial, you will learn how to do it the right way with jQuery.

11. Stunning Sliding Door Effect

Learnhow to make a stunning four corners sliding effect easily with jQuery.It s elegant, unique and really cool solution for thumbnail gallery.This tutorial includes detailed explanation that will guide you throughthe whole process.

12. Revealing Photo Slider With jQuery

In my journey to to learn jQuery, I?m trying to learn to do somethings that CSS can already do but that jQuery can do ?sexier?.Jonathan Snook has an article up ?Content Overlay with CSS? in whichextra content is revealed in a certain area when it is moused over.This inspired me to try to do something similar with jQuery. My firstthought was a thumbnail photo gallery, where clicking a button wouldreveal the entire photo and more information about that photo.

13. jAni – Colorful Background Image Animation Using jQuery

jAni is a simple plugin for jQuery which allows you animatebackground images. The plugin is basically an alternative to theanimated GIF but with several benefits. At first, it is always betterto use an animated GIF as this format is supported by all browserswithout any JavaScript code or additional markup, but the ?dark side?of it is that an animated GIF allows only 256 colors and you cannotcontrol animation in any way. The jAni loads a long vertical image andchanges its background positi

14. YOU LOVE

A lovely website that has made attractive and elegant use of jQueryby playing with its background. The background of the website usesjQuery background animations to show starry blue night clouds ad moon.Moreover the background is generated to reflect various stages of theday.

15. jQuery Tutorial ? Animate a hover with jQuery

Animate an image while hovering it and show the visitors informationwhile doing that. Sounds simple huh? Well it is, but the effect is niceand can be nice for a portfolio, for example.

16. Crafting an Animated Postcard With jQuery

Nicely illustrated banners are?nice. But why not add a little pizazzby using animation like Flash websites do? In this tutorial we willlearn the basics of setting up a continuous animation which can beapplied pretty much anywhere.

17. Building an Animated Cartoon Robot with jQuery

Heyy lets build a Robot using jQuery. Yes i mean ehat I say. Lets see how to build a robot using jQuery.

18. Creating a polaroid photo viewer with CSS3 and jQuery

Placing images on simple polaroids on a webpage simply did not do itfor me. I wanted to drag them around, rotate them and still have a funtime. That iss were CSS and jQuery come in play. By combining the CSS3Box Shadow and Rotate properties, this effect is relatively easy tocreate. When dragging a polaroid around, you will see the shadow. Whenit is placed down, it iss rotated to the left or the right (random).

19. Animate Curtains Opening with jQuery

In this tutorial you will learn how to animate a curtain opening scene in jQuery!

20. Animate Image Filling Up Using jQuery

Leran how to fill in the contents of an image with smooth animation using jQuery.

21. How to Make an Impressive Animated Landscape Header with jQuery

In this tutorial we will start with a cartoon themed header, buildtwo different states for content and animate a transition between themusing jQuery.