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 ↓
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 ↓
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 ↓
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 ↓
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 ↓
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 ↓
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 ↓
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 ↓
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 ↓
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 ↓
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 ↓
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 ↓
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 ↓
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 ↓
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 ↓
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 ↓
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 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 ↓
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 ↓
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 ↓
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.
Author: Jon
http://www.24alta.ru
Online roulette Canada.
Jannie Funster says
July 19, 2009 at 4:56 pmThat sliding face puzzle is really cool but the Panoramic image thing is my favorite — the applications would end where the imagination did.
exodus says
July 19, 2009 at 7:28 pmReally cool the css Keyboard!
Morten Barklund says
July 19, 2009 at 7:37 pmWell, 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”…
Brian Jørgensen says
July 19, 2009 at 8:28 pmVery good list, thank you. – Bookmarked :)
Jake Rocheleau says
July 19, 2009 at 9:57 pmAnother 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/
Felipe says
July 19, 2009 at 10:09 pmMuy bueno, de verdad muchas gracias.
Saludos desde Chile
Felipe
Donovan says
July 20, 2009 at 12:08 amDunno. 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.
Dzinepress says
July 20, 2009 at 12:37 ami really like new tutorials about Jquery, thanks.
Shabu | Geek Sucks says
July 20, 2009 at 12:50 amNice list, tweeted and added in Smashing Post :)
Frode Hetland says
July 20, 2009 at 1:40 amCool list! Thx man:)
Umut M. says
July 20, 2009 at 2:30 amVery nice list and thanks very much for including my drag’n drop tutorial.
Issa Qandil says
July 20, 2009 at 3:04 amExcellent List!!!
BenDesign says
July 20, 2009 at 3:52 amThats really helpfull. Thank you. :)
Andy Marshall says
July 20, 2009 at 4:42 amAwesome – thanks loads for that – bookmarked for a rainy day.
Joenel Umal says
July 20, 2009 at 7:08 amWow! Thanks for sharing.. this is amazing, i’ll use em on my site..
Dicky says
July 20, 2009 at 7:39 amCool jquery tutorials! I love the sliding login with jQuery one. Thanks!
Sam Dunn says
July 20, 2009 at 8:21 amThank you for appreciated my curtains sir, top shelf list.
sfsf says
July 20, 2009 at 8:51 amwonderful … i loved the Dock menu
really this site offering a very useful tools
dlv says
July 20, 2009 at 9:49 amexcellent, thanks for this collection of jquery tutorials !!
they allways rocks!
martin says
July 20, 2009 at 10:22 amthat 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/
Joseph Hayes says
July 20, 2009 at 10:24 amWhat a great roundup, thank you. A couple of the links didn’t work for me (ilovecolors in particular), but everything made me think!
Luci says
July 20, 2009 at 10:57 amOo 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.
Web Design Mumbai says
July 20, 2009 at 12:02 pmi love them all…… thanks a ton for sharing this list.
Mike Enriquez says
July 20, 2009 at 12:44 pmAwesome article. Thanks for the mention ;)
Jim C. says
July 20, 2009 at 8:05 pmMan 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.
nazcar says
July 20, 2009 at 10:38 pmgreat compilations.
Patrick says
July 21, 2009 at 12:37 amVery nice list here that you have here! I definitely found some of the effects I’d like to use on my own site. Thanks!
Lamin Barrow says
July 21, 2009 at 8:00 amExcellent list of jquery plugins. Thanx for the post. By the way I like your new design . :D
Phaoloo says
July 21, 2009 at 10:27 amYou impress me first, then I’ll impress my friend. Awesome tutorials!
Denis says
July 21, 2009 at 9:37 pmNice tutorials and Les Paul too :)
Dizi izle says
July 28, 2009 at 11:29 pmThank you very much. I was using JQuery for a while and these tutorials will make me better about JQuery.
Glenn says
July 31, 2009 at 7:01 pmLove it! I hope these get added to the jQuery iPhone cheat sheet!
Jonny Pioww says
August 6, 2009 at 7:28 amThat’s a fantastic little article. Thank you!
Devz says
August 6, 2009 at 1:41 pmI 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
Walter says
August 10, 2009 at 5:41 pmThanks for this excelent tutorial.
Aaron says
September 15, 2009 at 2:32 amGreat post! Keep it up! This info is so inspiring!
Shahriar Hyder says
September 24, 2009 at 5:45 amNice 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/
Andy B says
September 30, 2009 at 6:31 amHi 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
Robin says
October 27, 2009 at 8:21 pmFinally some new stuff in these roundups!
tuna says
November 10, 2009 at 4:54 pmgood listing, thanks..
yamazon says
January 10, 2010 at 2:23 amIt’s excelent list for me.
Thankyou.
I like Animate Curtains.
I want to use it on my own website.
PintuKita says
February 28, 2010 at 5:55 amThis is awesome… I like jQuery Horizontal Accordion. I will try this on my blog…
thank you
amlebede says
July 20, 2010 at 9:38 pmI personally like the “Creating A Fading Header” one.
iTechRoom says
August 22, 2010 at 5:43 amVery useful and Nice collection, checking one bye one. Thanks for sharing. Keep on updating.
Pixels design says
September 10, 2010 at 6:56 pmThis is some really cool stuff. Thank you so much!
Brett Widmann says
October 22, 2010 at 7:50 pmGreat set of tutorials. Thanks!
Bruno Gonçalves says
January 2, 2011 at 11:34 pmComo todos sabem jQuery é o que há na web. I love jQuery.
testking says
May 23, 2011 at 8:14 amI loved this tutorial! First, because Remy explains how to achieve this effect very nicely, and second because the result is simply awesome!
Top 10 english Songs 2011 says
June 15, 2011 at 8:52 amReally cool, Thanks for the Share!!
Hi Friends says
July 5, 2011 at 10:11 amNice post thanks dude
kekerain says
July 27, 2011 at 3:58 amso good~welcome to http://www.27my.com
Anas Ali says
July 30, 2011 at 8:57 amAnas 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,