50 Magical Effects of jQuery Part I

advertisements

Make your work easy by these jquery examples. Get rid of the hassle of long coding and use these jquery tutorials and follow any Jquery template. Since the arrival of the jQuery library, the life of JavaScript programmers have gotten a lot easier because now it’s simpler to develop web 2.0 applications using Jquery Templates. With jQuery templates, the programmers can keep their code organized and concise, which is the major slogan of the library, “write less, do more”

advertisements

You can utilize jQuery to handle events, generate animations, and even add an Ajax support into your web applications in a very easy way. Certainly you can use JavaScript to execute all the jQuery functions, but if you use it, your programming times will reduce and your effectiveness will increase, and that’s the real magic of jQuery. On this roundup we will show you the most captivating and creative jQuery tools and effects to inspire you, from animations to slideshows, you will find plenty of effects on this article, hope you enjoy it.

Transition effects

As the name says, these effects are designed to generate animated switches between different elements, from smooth transitions to overlapping animations, here are some of the nicest transition effects made with jQuery:

1. InnerFade

50 Magical Effects Of JQuery Part I

A standard transition effect that always works well when implemented on your designs.

2. jQuery Easing Plugin

jQueryeffects01 - 50 Magical Effects Of JQuery Part I

You can find an extended list of jQuery effects within this website.

3. HighlightFade

jQueryeffects02 - 50 Magical Effects Of JQuery Part I

Highlights, rescaling and some other cool effects, 100% jQuery.

4. jQuery Cycle Plugin

jQueryeffects03 - 50 Magical Effects Of JQuery Part I

You will certainly enjoy the way this transition occurs, it’s difficult to see how it’s executed.

5. Dynamic Page / Replacing Content

jQueryeffects04 - 50 Magical Effects Of JQuery Part I

An elegant menu with some animated transitions from button to button.

6. Flip

jQueryeffects05 - 50 Magical Effects Of JQuery Part I

Great transitions made with pure jQuery, it seem like it was made with Flash or something.

7. jQuery Cycle Plugin

jQueryeffects06 - 50 Magical Effects Of JQuery Part I

Different transition effects to implement on your site.

8. Image Cross Fade Transition

jQueryeffects07 - 50 Magical Effects Of JQuery Part I

Well transition effect, the screenshot can provide you an idea of how does it work.

9. AviaSlider

jQueryeffects08 - 50 Magical Effects Of JQuery Part I

Beautiful transitions to implement within a gallery.

10. Creating a fading header

jQueryeffects09 - 50 Magical Effects Of JQuery Part I

It’s nice to use animation effects on a header, it gives a lot of dynamic to the site.

11. jqFancyTransitions

jQueryeffects10 - 50 Magical Effects Of JQuery Part I

Lovely transitions that can easily be implemented inside a gallery.

12. jQuery Cycle Plugin – Effects Browser

jQueryeffects11 - 50 Magical Effects Of JQuery Part I

An extended list of jQuery effects to use with your thumbnails, you can notice some of the effects on the screenshot.

Animation

This section covers jQuery effects that are made either for fun or to fancy the appearance of a website, the name says it all, jQuery can make things move!.

13. jQuery Approach

jQueryeffects12 - 50 Magical Effects Of JQuery Part I

Probably you can  remember yourself doing this in Flash, see it working with pure jQuery is just great.

14. Building an Animated Cartoon Robot with jQuery

jQueryeffects13 - 50 Magical Effects Of JQuery Part I

Domo arigato Mister Roboto, moving with jQuery sama, this animation effects gathers all the animation basics.

15. Quicksand

jQueryeffects14 - 50 Magical Effects Of JQuery Part I

You are going to love the quality of this effect, you can create a nice dynamic library with this.

16. Spritely

jQueryeffects15 - 50 Magical Effects Of JQuery Part I

Here is a clear example of why Flash is in danger, see what came out with pure jQuery.

17. Puffing Smoke Effect in jQuery

jQueryeffects17 - 50 Magical Effects Of JQuery Part I

Oh Mario, what are you doing here?, this could be a nice idea to create dynamic websites.

18. Crafting an Animated Postcard With jQuery

jQueryeffects18 - 50 Magical Effects Of JQuery Part I

Great animation effect to use inside a postcard.

19. Glimmer

jQueryeffects19 - 50 Magical Effects Of JQuery Part I

Another great animation effect for jQuery lovers, you can see how the landscapes moves.

20. Create a Stunning Sliding Door Effect with jQuery

jQueryeffects20 - 50 Magical Effects Of JQuery Part I

Nice animation effects to use when organizing a new picture gallery.

21. Parallax

jQueryeffects21 - 50 Magical Effects Of JQuery Part I

Parallax is outstanding, you can play with depth of field with pure jQuery and zero interpolations.

22. Animated Header Background

jQueryeffects22 - 50 Magical Effects Of JQuery Part I

Subtle movement to give some additional texture to your backgrounds.

23.  Impressive Animated Landscape Header with jQuery

jQueryeffects23 - 50 Magical Effects Of JQuery Part I

Another prove of the true jQuery’s potential, see how you can manage to move at different speed values a scenario.

24. jQuery UI Animation Effects

jQueryeffects24 - 50 Magical Effects Of JQuery Part I

Check out this site to find out some interesting jQuery effects that can help you to optimize your site.

25. Animate Curtains Opening with jQuery

jQueryeffects25 - 50 Magical Effects Of JQuery Part I

We got surprised when we found this, it seems like a Flash animation and it isn’t!.

26. Simple Effects Plugins

jQueryeffects26 - 50 Magical Effects Of JQuery Part I

Some basic effects that can always help you to stylize a webpage.

27. jQuery Circulate

jQueryeffects27 - 50 Magical Effects Of JQuery Part I

Another animation using circles and movement, great effect.

28. JavaScript Sprite Animation Using jQuery

jQueryeffects28 - 50 Magical Effects Of JQuery Part I

You won’t believe that they’re already accomplishing things such as this book effect with pure jQuery.

29. jQuery DJ Hero

jQueryeffects29 - 50 Magical Effects Of JQuery Part I

If you are a DJ and jQuery lover, you will definitely like this application.

30. jQuery API

jQueryeffects30 - 50 Magical Effects Of JQuery Part I

You can find a lot of great jQuery effects on this website.

31. jQuery Solar System

jQueryeffects31 - 50 Magical Effects Of JQuery Part I

This is just great, what a great management of volume and movement.

32. Gravity in jQuery

jQueryeffects32 - 50 Magical Effects Of JQuery Part I

You can play with the laws of physics, jQuery is just great.

33. Auto-Moving Parallax Background

jQueryeffects33 - 50 Magical Effects Of JQuery Part I

If you check the demo you will see the background stars moving.

34. Full Cycle of Animation on Hover/Off

jQueryeffects34 - 50 Magical Effects Of JQuery Part I

Several animations effects made with jQuery, we spend a few minutes playing with these fun bars.

35. jAni

jQueryeffects35 - 50 Magical Effects Of JQuery Part I

Beautiful animation, it’s hard to believe that this was made without using Flash interpolations.

36. Animate Image Filling Up

jQueryeffects36 - 50 Magical Effects Of JQuery Part I

Interesting animation that fills an object using jQuery, We’re sure that designers will find a nice use for this.

37. dynamic PNG shadow position & opacity

jQueryeffects37 - 50 Magical Effects Of JQuery Part I

This jQuery effect can make you spend like ten minutes messing around with the bulb, just great.

38. jQuery Animations: A 7-Step Program

jQueryeffects38 - 50 Magical Effects Of JQuery Part I

Nice jQuery tips from the guys of NetTuts+, some elegant effects can be found in here.

39. Fun with jQuery’s Animate () function

jQueryeffects39 - 50 Magical Effects Of JQuery Part I

Just having a little fun with the animate () jQuery function.

40. Easy Sequential Animations in jQuery

jQueryeffects40 - 50 Magical Effects Of JQuery Part I

Useful jQuery tips for beginners to help them start making their own effects.

41. jQuery 3D Rotator

jQueryeffects41 - 50 Magical Effects Of JQuery Part I

Similar to tag clouds with a little 3D vibe, interesting jQuery effect.

42. jQuery Faux 3D

jQueryeffects42 - 50 Magical Effects Of JQuery Part I

By simply placing different boxes one in front of another, you can generate a fancy 3D animation with pure jQuery.

43. Image Flip Using jQuery

jQueryeffects43 - 50 Magical Effects Of JQuery Part I

You can play with depth of field with jQuery and generate great illusions like this one.

44. 3D Tag Cloud

jQueryeffects44 - 50 Magical Effects Of JQuery Part I

You don’t need to use photographs or volumetric objects to create depth of field sensations, as you can see on this example.

45. Text with Moving Backgrounds

jQueryeffects45 - 50 Magical Effects Of JQuery Part I

Great fancy effect, a moving background masked with a text, really nice idea.

46. Image Cube

jQueryeffects46 - 50 Magical Effects Of JQuery Part I

This effect certainly looks to play with 3D by making a volumetric shape to show a series of pictures.

47. Flip HTML content in 3D

jQueryeffects47 - 50 Magical Effects Of JQuery Part I

Another 3D implementation with jQuery, very simple.

48. 3D Sphere

jQueryeffects48 - 50 Magical Effects Of JQuery Part I

Similar to a previous effect of this roundup, on this case we have a moving sphere emulated through the presence of a few elements.

49. Animated 3D Transforms

jQueryeffects49 - 50 Magical Effects Of JQuery Part I

This jQuery effect works with a mouse-over behavior, so if you roll over one of this cute cartoons, they will react.

50. Smart 3D

jQueryeffects50 - 50 Magical Effects Of JQuery Part I

Similar to Parallax, this 3D effect with jQuery works great in banners and websites in general.

advertisements

2 thoughts on “50 Magical Effects of jQuery Part I”

  1. green says:

    smart 3D is Very nice

  2. Rafael says:

    Awesome list. Flip! is what I was looking for. Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>