20+ Uniquely Cool jQuery Plugins and Tutorials

Posted in Freebies4 years ago • Written by 19 Comments

jQuery is a fantastic resource with a powerful base of plugins, but we often see roundup’s of the same boring plugins that all do the same thing. Here are 22 plugins that don’t simply do the same thing, but do things differently, and are exciting rather than boring. We hope that these plugins will be handy in your next project.

1. Airport Text Effect

Demo | Link

You know those flickering messages you see on boards at airports and train stations? That effect is now at your fingertips with this plugin.

2. Sliding Image Puzzle

Demo | Link

Remember those sliding image puzzles you played when you were little? Well now you can make your own in your browser with this clever little plugin.

3. Quickflip

Demo | Link

With this plugin, you can mimic the effect of cooly flipping over an element such as an image, or lets say for example, a business card.

4. Spritley

Demo | Link

A fantastic plugin to create a truly inspiring sliding header, giving the illusion of flash, without flash itself!

5. JQZoom

Demo | Link

Slightly less unique, but still just as cool, this plugin allows you to have preview zoom in fields on an image, just like we’ve seen some major retailers using.

6. Quicksand

Demo | Link

Re-order and sort your list items with beautiful transitions with this plugin.  Super sleek, and super fast.

7. Spacegallery

Demo | Link

This image gallery offers up the feeling of flicking through items in a filing cabinet. You view images one by one, and see the ones behind stacking up.

8. jQuery Heat Map

Demo | Link

There are plenty tools for creating heat-maps of your site, but say you want to do it yourself? This will do the trick nicely with it clean simple interface.

9. On-screen Keyboard

Demo | Link

We’ve seen on-screen keyboards before, but this thorough tutorial shows you how to craft one for yourself, ready for use in your browser.

10. Curtains Effect

Demo | Link

Want to give something the proper screen treatment it deserves? Unveil it with giant curtains using this jQuery tutorial.

11. Sticky Notes

Demo | Link

Add draggable, editable stick notes to your website with this fantastic jQuery plugin!

12. Lens Flare

Demo | Link

Want to make you’re images more interactive? Then adding a lens flare to your image is a fantastic way to do so. Check out these fantastic demos.

13. Star Rating

Demo | Link

Turn a boring set of radio buttons, or select drop down, into a fantastic looking star rating system with great fallback for JavaScript turned off.

14. Parallax

Demo | Link

Use Parallax to create a moving image relative to the mouse position where multiple layers move.

15. Jplayer

DemoLink

Allow users to listen to audio on your site with Jplayer which even supports html5!

16. MoaText

Demo | Link

Though I can’t really think of a practical application, this plugin lets you manipulate text with your mouse in wave effects and more.

17. Grid Accordion

Demo | Link

This is a fantastic tutorial from Chris Coyier at CSS-tricks on making a unique accordion that works as a grid.

18. Form Wizard

Demo | Link

Turn normal forms into a step-by-step wizard making your forms more usable and less daunting to users.

19. Lazy

Link

Found yourself with an html head tag overflowing with css and JavaScript resources? Let Lazy fix that for you.

20. Elastic

Demo | Link

Elastic is an aptly named plugin that will grow your textarea as you type until you hit the max height defined.

21. UI Layout

Demo | Link

UI Layout makes complex layouts with sliding panels, and so on a breeze. The demo speaks for itself on this one.

22. Sliding Boxes and Captions

DemoLink

This great tutorial allows us to get dynamic with how image captions are displayed on images.

Further Discussion

I doubt I’ve found every fantastic unique jQuery plugin out there, so if you know of more, make sure you add them in the comments for others to see as well.

20 Written ArticlesWebsite

Matt is an 18 year old web designer from Scotland, UK. He loves creating beautiful websites across different platforms. High on his things to learn fully are Jquery and php. He is extremely excited by css3 and html5 and can't wait to see them rolled out fully. To learn more about Matt, follow him @QwibbleDesigns, or check out his portfolio.

19 Comments Best Comments First
  • Michael Pehl

    Saturday, June 19th, 2010 14:55

    6

    No new plugins this time? I’ve seen all plugins several times now…

    Do something new please

    +2
  • Claudia Liersch

    Saturday, June 19th, 2010 00:13

    2

    Nice jQuery Collection, thank you!

    +1
  • Jay Gilford

    Friday, June 25th, 2010 15:30

    11

    I have to say I’ve seen all of these plugins before, there are far more exhaustive lists out there (such as those on smashing magazine)

    0
    • Ron

      Sunday, July 25th, 2010 05:10

      14

      Nice list.

      When you get a porsche, there is always people that have a picture of a maserati.

      0
    • Rebecca

      Saturday, June 26th, 2010 18:15

      12

      Yeh yeh yeh… We are to assume here, Jay Gilford, that being the clever dude you portray yourself to be, you would have not been here dissing the article. Dude, if you like Smashing Mag more… There’s the door! Of course, you might have known that already, right?

      Would it kill you to have something positive to say?

      0
  • burakg

    Sunday, June 27th, 2010 18:12

    13

    Absolutely nice collection with carefully selected plugins. Thanks for the list

    0
  • Arafat Hossain Piyada

    Saturday, June 19th, 2010 04:34

    1

    This is probably coolest set of jQueary plugins. I really like ‘Airport Text Effect’ and ‘jQuery Heat Map’, both will help me well.

    0
  • Dan

    Tuesday, March 27th, 2012 21:24

    18

    Great list, you are right though, of few of these are not very practical but nonetheless cool.
    Here is another one for you list, the ‘Before/After’ slider plug in.
    http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/

    0
    • Dainis Graveris

      Tuesday, July 17th, 2012 10:29

      19

      Amazing addition, Dan! This is awesome for retouching or photomanipulation tutorials :)

      0
  • Yordan

    Monday, January 30th, 2012 00:19

    17

    I love this collection. Great job and thanks.

    0
  • Marc

    Saturday, September 18th, 2010 15:41

    15

    Thanks for this collection. With jquery you can add very cool features and effects to a website. There are always some interesting plugins in your article.

    0
  • Anonymous

    Monday, November 22nd, 2010 12:36

    16

    Nice collection thanks.

    I just need to find some excuses to use some of these!!

    0
  • michael

    Saturday, June 19th, 2010 00:58

    3

    Very cool post.

    -1
  • gopal bhattacharjee

    Saturday, June 19th, 2010 09:09

    4

    Good jQuery collections Matthew…..I’ll try some plug in add to my next project…

    -1
  • Beben

    Monday, June 21st, 2010 12:39

    10

    its a one good list…
    thanks for share mate ^^

    -1
  • Tom Girling

    Saturday, June 19th, 2010 10:42

    5

    Thanks for that – there are a couple of plugins there that I’ve not seen before….very useful – I’m liking Spritely & Quicksand quite a lot.

    -1
  • Thomas Craig

    Monday, June 21st, 2010 11:41

    9

    Excellent list Matt, one that I like to use is the form wizard, great for creating forms.

    -1
  • shashank

    Monday, June 21st, 2010 10:50

    8

    the airport plugin is one of mah favourite one :)
    thnx 4 amazing collection !

    -1
  • Ken

    Monday, June 21st, 2010 01:27

    7

    hey but this list is really great. I will start using a few. And wait the majority is working in IE6 too! Thanks bro!

    -1
  • Dan

    Tuesday, March 27th, 2012 21:24

    18

    Great list, you are right though, of few of these are not very practical but nonetheless cool.
    Here is another one for you list, the ‘Before/After’ slider plug in.
    http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/

    0
    • Dainis Graveris

      Tuesday, July 17th, 2012 10:29

      19

      Amazing addition, Dan! This is awesome for retouching or photomanipulation tutorials :)

      0
  • Yordan

    Monday, January 30th, 2012 00:19

    17

    I love this collection. Great job and thanks.

    0
  • Anonymous

    Monday, November 22nd, 2010 12:36

    16

    Nice collection thanks.

    I just need to find some excuses to use some of these!!

    0
  • Marc

    Saturday, September 18th, 2010 15:41

    15

    Thanks for this collection. With jquery you can add very cool features and effects to a website. There are always some interesting plugins in your article.

    0
  • burakg

    Sunday, June 27th, 2010 18:12

    13

    Absolutely nice collection with carefully selected plugins. Thanks for the list

    0
  • Jay Gilford

    Friday, June 25th, 2010 15:30

    11

    I have to say I’ve seen all of these plugins before, there are far more exhaustive lists out there (such as those on smashing magazine)

    0
    • Rebecca

      Saturday, June 26th, 2010 18:15

      12

      Yeh yeh yeh… We are to assume here, Jay Gilford, that being the clever dude you portray yourself to be, you would have not been here dissing the article. Dude, if you like Smashing Mag more… There’s the door! Of course, you might have known that already, right?

      Would it kill you to have something positive to say?

      0
    • Ron

      Sunday, July 25th, 2010 05:10

      14

      Nice list.

      When you get a porsche, there is always people that have a picture of a maserati.

      0
  • Beben

    Monday, June 21st, 2010 12:39

    10

    its a one good list…
    thanks for share mate ^^

    -1
  • Thomas Craig

    Monday, June 21st, 2010 11:41

    9

    Excellent list Matt, one that I like to use is the form wizard, great for creating forms.

    -1
  • shashank

    Monday, June 21st, 2010 10:50

    8

    the airport plugin is one of mah favourite one :)
    thnx 4 amazing collection !

    -1
  • Ken

    Monday, June 21st, 2010 01:27

    7

    hey but this list is really great. I will start using a few. And wait the majority is working in IE6 too! Thanks bro!

    -1
  • Michael Pehl

    Saturday, June 19th, 2010 14:55

    6

    No new plugins this time? I’ve seen all plugins several times now…

    Do something new please

    +2
  • Tom Girling

    Saturday, June 19th, 2010 10:42

    5

    Thanks for that – there are a couple of plugins there that I’ve not seen before….very useful – I’m liking Spritely & Quicksand quite a lot.

    -1
  • gopal bhattacharjee

    Saturday, June 19th, 2010 09:09

    4

    Good jQuery collections Matthew…..I’ll try some plug in add to my next project…

    -1
  • michael

    Saturday, June 19th, 2010 00:58

    3

    Very cool post.

    -1
  • Claudia Liersch

    Saturday, June 19th, 2010 00:13

    2

    Nice jQuery Collection, thank you!

    +1
  • Arafat Hossain Piyada

    Saturday, June 19th, 2010 04:34

    1

    This is probably coolest set of jQueary plugins. I really like ‘Airport Text Effect’ and ‘jQuery Heat Map’, both will help me well.

    0

Comments are closed.

54.227.12.219 - unknown - unknown - US