SpyreStudios

Web Design and Development Magazine

  • Design
  • Resources
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

20 jQuery Tutorials And Plugins To Impress Your Friends

July 19, 2009 by Jon 52 Comments

I have always liked playing around with jQuery and I’m sure many of you do too! In fact we’ve published some jQuery ‘getting started‘ guides here on SpyreStudios in the past. So this time I thought we’d go more in depth and I’ve hand-picked 20 awesome jQuery tutorials (most of them have working demos)

Here they are:

Creating a Keyboard with CSS and jQuery ↓

Creating a Keyboard with CSS and jQuery
In this tutorial you’ll learn how to create a dynamic keyboard. Of course actually using this keyboard on a website or in a project is probably not gonna happen very often (if ever), but it’s always nice to play around with jQuery to see what can be done.

Animate Curtains Opening with jQuery ↓

Animate Curtains Opening with jQuery
I thought this tutorial was pretty amazing! In this one Sam Dunn explains how to create and animate curtains opening and uses the easing plugin to get a bouncing effect when the rope is pulled.

BBC Radio 1 Zoom Tabs ↓

BBC Radio 1 Zoom Tabs
I loved this tutorial! First, because Remy explains how to achieve this effect very nicely, and second because the result is simply awesome!

Sexy Drop Down Menu w/ jQuery & CSS ↓

Sexy Drop Down Menu w/ jQuery & CSS
Drop-down menus are not new and a lot of sites use them but this tutorial rocks! Soh teaches us how to create a ‘sexy’ menu using jQuery and CSS that degrades gracefully. A must read!

Learning jQuery: Fading Menu – Replacing Content ↓

Learning jQuery: Fading Menu – Replacing Content
I have utmost respect for Chris and his work and in this tutorial Chris teaches us how to create a fading menu which I think is pretty neat!

jQuery Demo: Creating A Sliding Image Puzzle Plug-In ↓

jQuery Demo: Creating A Sliding Image Puzzle Plug-In
This tutorial show us how to create a sliding image puzzle. While you may never use this on a client site, it just goes to show what what can be done using jQuery. Very impressive.

Creating A Fading Header ↓

Creating a fading header
When I first saw Bits & Pixels I thought the header/logo was freakin’ cool. And guess what? Fredrik wrote a tutorial on how he achieved this fade in/out effect!

Sliding menu using jQuery ↓

Sliding menu using jQuery
I Love Colors, on top of being a really nice looking site, has this tutorial on how to create a sliding menu, using jQuery of course!

CSS Dock Menu ↓

CSS Dock Menu
Ahh, the Mac dock! I’ve always loved the way the icons pop on mouseover, it’s such a nice effect. This tutorial will show you how to create you own dock menu using jQuery and CSS.

jQuery Virtual Tour ↓

jQuery Virtual Tour
Large panoramic image? No problem, with this plugin you’ll be able to create a ‘virtual tour’. Very nice if you ask me! And I can already see how this can be used in projects.

How to Load In and Animate Content with jQuery ↓

How to Load In and Animate Content with jQuery
Loading content is one thing, animating it on the other hand can be very cool! This tutorial on NETTUTS will show you how to enhance a rather basic site with jQuery and also load content with Ajax.

Nice & Clean Sliding Login Panel built with jQuery ↓

Nice & Clean Sliding Login Panel built with jQuery
Sliding panels are not uncommon, but in this tutorial you’ll learn how to create a really slick one. And for the WordPress lovers out there, there’s also a tutorial on how to implement it in WordPress. Well worth checking out!

jQuery Dropdown Search Panel ↓

jQuery Dropdown Search Panel
I strongly believe that search functionalities should be easily accessible and visible on every website. But there are some cases where you need or want to hide it to fit in a design. This tutorial will show you how to create a drop-down search panel.

Dynamic Drag’n Drop With jQuery And PHP ↓

Dynamic Drag’n Drop With jQuery And PHP
Ever wondered how to create a drag & drop interface? This tutorial will show you how and also how to implement PHP and create a database. Really nice!

How To Build A Personal Mashup Page With jQuery ↓

How To Build A Personal Mashup Page With jQuery
Lifestreaming and micro-blogging is huge these days. In this tutorial you’ll learn to create a personal ‘mashup’ page using jQuery and JSONP and then pull data from Twitter, GitHub and a RSS feed.

jQuery Horizontal Accordion ↓

jQuery Horizontal Accordion
We’ve all seen vertical accordions before, most probably used in sidebars. But this time let’s see how you can create a horizontal one!

Creating a polaroid photo viewer with CSS3 and jQuery ↓

Creating a polaroid photo viewer with CSS3 and jQuery
Creating a photo viewer with jQuery isn’t that hard, but this tutorial show you how to create one using jQuery and CSS3. Of course since it’s using CSS3, the final result may look different depending on the browser you use. Just download Safari and kick IE6 out the door! :)

Creating A Unique Gallery By Using z-index And jQuery ↓

Creating A Unique Gallery By Using z-index And jQuery
I loved this tutorial and the final result is pretty impressive! This detailed tutorial teaches us how to create an image gallery that looks like a pile of pics. Awesome!

Smart Columns w/ CSS & jQuery ↓

Smart Columns w/ CSS & jQuery
After this tutorial I fell in love with ‘smart columns’. Soh has a killer tutorial on how to create them using CSS and jQuery! Something like this can also be seen on Creative Depart.

Make Your Header Responses To Mouse Movements With JParallax ↓

Make Your Header Responses To Mouse Movements With JParallax
JParallax isn’t new, but it opens so many doors to jQuery lovers! This tutorial show us how to create a header that responds to mouse movements. Very nice! Something similar can also be seen on the Silverback App website (resize the window to see the effect in action).

Your Turn To Talk

Please let me know what you think in the comment section! Do you know of any other cool or impressive jQuery tutorials? Share them with the rest of us! Now go and impress your friends! :)

Whether you want to get mcitp certification to get microsoft certified or looking for ccie exam help to improve your score in networking exam, test king offers up to date resources for all kind of certification exam with guaranteed success.

Filed Under: CSS, jQuery, Resources

Comments

  1. Jannie Funster says

    July 19, 2009 at 4:56 pm

    That sliding face puzzle is really cool but the Panoramic image thing is my favorite — the applications would end where the imagination did.

  2. exodus says

    July 19, 2009 at 7:28 pm

    Really cool the css Keyboard!

  3. Morten Barklund says

    July 19, 2009 at 7:37 pm

    Well, the effects are quite nice but many of the tutorials are very “un-technical” – they assume the reader is someone who wouldn’t touch “the code” if he didn’t really have to. I’d like to see lists split up in “tutorials for designers” and “tutorials for programmers”…

  4. Brian Jørgensen says

    July 19, 2009 at 8:28 pm

    Very good list, thank you. – Bookmarked :)

  5. Jake Rocheleau says

    July 19, 2009 at 9:57 pm

    Another impressive jQuery list. Also bookmarked to Delicious, and I’ll be sure to blog about it on my web 2.0 / JavaScript blog http://www.insidethewebb.com/

  6. Felipe says

    July 19, 2009 at 10:09 pm

    Muy bueno, de verdad muchas gracias.

    Saludos desde Chile

    Felipe

  7. Donovan says

    July 20, 2009 at 12:08 am

    Dunno. These are cool, but many are not so hot in terms of usability. If you’re new @ jQuery/html/js, then play with it. But I think overall a new programmer is better off learning to create this kind of effect than just using libs.

  8. Dzinepress says

    July 20, 2009 at 12:37 am

    i really like new tutorials about Jquery, thanks.

  9. Shabu | Geek Sucks says

    July 20, 2009 at 12:50 am

    Nice list, tweeted and added in Smashing Post :)

  10. Frode Hetland says

    July 20, 2009 at 1:40 am

    Cool list! Thx man:)

  11. Umut M. says

    July 20, 2009 at 2:30 am

    Very nice list and thanks very much for including my drag’n drop tutorial.

  12. Issa Qandil says

    July 20, 2009 at 3:04 am

    Excellent List!!!

  13. BenDesign says

    July 20, 2009 at 3:52 am

    Thats really helpfull. Thank you. :)

  14. Andy Marshall says

    July 20, 2009 at 4:42 am

    Awesome – thanks loads for that – bookmarked for a rainy day.

  15. Joenel Umal says

    July 20, 2009 at 7:08 am

    Wow! Thanks for sharing.. this is amazing, i’ll use em on my site..

  16. Dicky says

    July 20, 2009 at 7:39 am

    Cool jquery tutorials! I love the sliding login with jQuery one. Thanks!

  17. Sam Dunn says

    July 20, 2009 at 8:21 am

    Thank you for appreciated my curtains sir, top shelf list.

  18. sfsf says

    July 20, 2009 at 8:51 am

    wonderful … i loved the Dock menu

    really this site offering a very useful tools

  19. dlv says

    July 20, 2009 at 9:49 am

    excellent, thanks for this collection of jquery tutorials !!
    they allways rocks!

  20. martin says

    July 20, 2009 at 10:22 am

    that is nice – if done with this list you might want to check the relaticious websites of this page for even more tutorials

    http://wectar.com/relaticious?yups=http://spyrestudios.com/jquery-tutorials-plugins-impress-your-friends/

  21. Joseph Hayes says

    July 20, 2009 at 10:24 am

    What a great roundup, thank you. A couple of the links didn’t work for me (ilovecolors in particular), but everything made me think!

  22. Luci says

    July 20, 2009 at 10:57 am

    Oo definately some brilliant gems there to get stuck into on a rainey day – and in England, that’s most days! I particularly like the Fading Header, since that could be applied to add a little ‘touch’ to lots of things. Thanks for sharing.

  23. Web Design Mumbai says

    July 20, 2009 at 12:02 pm

    i love them all…… thanks a ton for sharing this list.

  24. Mike Enriquez says

    July 20, 2009 at 12:44 pm

    Awesome article. Thanks for the mention ;)

  25. Jim C. says

    July 20, 2009 at 8:05 pm

    Man these are seriously inspiring! I love seeing new creative ways to use jquery. Really makes me want to go home and create something of my own! Dugg.

  26. nazcar says

    July 20, 2009 at 10:38 pm

    great compilations.

  27. Patrick says

    July 21, 2009 at 12:37 am

    Very nice list here that you have here! I definitely found some of the effects I’d like to use on my own site. Thanks!

  28. Lamin Barrow says

    July 21, 2009 at 8:00 am

    Excellent list of jquery plugins. Thanx for the post. By the way I like your new design . :D

  29. Phaoloo says

    July 21, 2009 at 10:27 am

    You impress me first, then I’ll impress my friend. Awesome tutorials!

  30. Denis says

    July 21, 2009 at 9:37 pm

    Nice tutorials and Les Paul too :)

  31. Dizi izle says

    July 28, 2009 at 11:29 pm

    Thank you very much. I was using JQuery for a while and these tutorials will make me better about JQuery.

  32. Glenn says

    July 31, 2009 at 7:01 pm

    Love it! I hope these get added to the jQuery iPhone cheat sheet!

  33. Jonny Pioww says

    August 6, 2009 at 7:28 am

    That’s a fantastic little article. Thank you!

  34. Devz says

    August 6, 2009 at 1:41 pm

    I just got fanatic for this.. thanks a lot..

    well finally the neat and clean organisation of ur collection matters more than a useful or good collection..

    Thanks for sharing… I’ll surely implement some in my sitework

  35. Walter says

    August 10, 2009 at 5:41 pm

    Thanks for this excelent tutorial.

  36. Aaron says

    September 15, 2009 at 2:32 am

    Great post! Keep it up! This info is so inspiring!

  37. Shahriar Hyder says

    September 24, 2009 at 5:45 am

    Nice collection of jQuery Tutorials and Plugins mate. I have also linked to yours from my blog post below where I am trying to collect the most useful and common jQuery code snippets for JavaScript over the web. Here is the title and the link to the jQuery link compilation endeavor:

    Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance

    http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-tutorials-tips-tricks-techniques-to-improve-performance/

  38. Andy B says

    September 30, 2009 at 6:31 am

    Hi great post, does anyone know of a way (Jquery or not) to create a filmstrip effect? I want a feature on a site (nothing to do with mortgages obviously) where people can uploads photo’s via PHP and then use JQuery or similar to have a filmstrip running along the bottom above the footer.

    Any Idea’s? If there’s a tutorial out there it would be mo appreciated – I am not exactly a web Guru so these always come in handy! Cheers

  39. Robin says

    October 27, 2009 at 8:21 pm

    Finally some new stuff in these roundups!

  40. tuna says

    November 10, 2009 at 4:54 pm

    good listing, thanks..

  41. yamazon says

    January 10, 2010 at 2:23 am

    It’s excelent list for me.
    Thankyou.

    I like Animate Curtains.

    I want to use it on my own website.

  42. PintuKita says

    February 28, 2010 at 5:55 am

    This is awesome… I like jQuery Horizontal Accordion. I will try this on my blog…
    thank you

  43. amlebede says

    July 20, 2010 at 9:38 pm

    I personally like the “Creating A Fading Header” one.

  44. iTechRoom says

    August 22, 2010 at 5:43 am

    Very useful and Nice collection, checking one bye one. Thanks for sharing. Keep on updating.

  45. Pixels design says

    September 10, 2010 at 6:56 pm

    This is some really cool stuff. Thank you so much!

  46. Brett Widmann says

    October 22, 2010 at 7:50 pm

    Great set of tutorials. Thanks!

  47. Bruno Gonçalves says

    January 2, 2011 at 11:34 pm

    Como todos sabem jQuery é o que há na web. I love jQuery.

  48. testking says

    May 23, 2011 at 8:14 am

    I loved this tutorial! First, because Remy explains how to achieve this effect very nicely, and second because the result is simply awesome!

  49. Top 10 english Songs 2011 says

    June 15, 2011 at 8:52 am

    Really cool, Thanks for the Share!!

  50. Hi Friends says

    July 5, 2011 at 10:11 am

    Nice post thanks dude

  51. kekerain says

    July 27, 2011 at 3:58 am

    so good~welcome to http://www.27my.com

  52. Anas Ali says

    July 30, 2011 at 8:57 am

    Anas Ali “Web Designer” Yash Ali
    http://anasaliwebdesigner.blogspot.com/

    Hi friends i am Anas Ali i am a professionally Web Designer basically i am from Delhi i am putting up at Trilok Puri it is situated near Mayur Vihar Phase 1

    [email protected]

    anas ali, anas, ali, yash ali, yash, 9540386683, Web Designer,

Leave a Reply

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

Please prove you're human *

Recent Posts

  • How to Choose a Stunning Font Package for Your Brand
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022