Before 2008, there were only a handful (compared to now) of sites which were of a very high level of quality and stunningly unique; standing out from the rest. It was in 2008 when many tools and frameworks became more popular and widely used amongst the masses. This included CSS based design and everyone’s favourite – WordPress! Due to this, today, every half decent web designer has a stunning website. You’re probably wondering what I’m getting at? To make your website standout from the rest, you need to take your website to the next level. In this post, I’m going to showcase many Advanced jQuery techniques to add that extra touch to your site.
Advanced jQuery
Below are a list of sites that offer some amazing jQuery script by which you can achieve some stunning effect for your site. I have given a brief introduction to each effect with a link to the original site direct download.
TN3 Gallery (Sponser – added July 2012)
A jQuery and WordPress image gallery.
Includes slideshow, transition effects, multiple album options, CSS skinning and much more. Beautiful looks for a Beautiful gallery.
Taking Captcha’s to the next level! A new, intuitive drag and drop captcha:
Here we’re asked to drag the pencil into the circle! Neat!
Note: According to the producers, this Captcha’s security level is medium.
jQuery Cycle – Custom Incoming/Outgoing Transitions
Cool image transitions that were once possible in Flash only. This powerful script has room for lots of customisation to all you to fine grain your transition over speed and easing in/out transitions.
I really like this effect (might implement it here in the future!).
A very nice/smooth script which you can implement to a div.
This script can be used for
- Image Galleries
- Products
- Navigation
- Anything else!
Some features:
- Horizontal/Vertical
- Can Scroll using navigational buttons, API calls, keyboard arrow keys, and the mouse scroll wheel.
- Ability to make your own effects
- and lots of other stuff! See script homepage for script
An awesome effect for portfolios and just showcasing your work!
Here you click the tabs above the images and jQuery performs a cool transition to filter out the required category!
A Nice Effect!
A customisable password strength meter to show how secure your password is.
With a bit of tweaking, you should be able to implement it with your registration forms. I’m sure the download contains all the instructions.
Note: Images can be changed!
Again from the same site as the above two. This is similar to an accordion effect however horizontal from the edge of the screen.
Like the one found on a Mac.
Smooooth!
BONUS – jQuery Tetris!!!
WIN!
Conclusion
You need to initially impress your users within a very short amount of time and one of the methods to achieve this is to use jQuery. By adopting some of the uses above backed up by some inspiration on your side, you can be sure that many of your users will return.
Important Note! All of the above methods are the foundation upon which a strong structure can be built. Use it to your advantage. With some tweaking and CSS, you can take much more out of them. For a freelancer. it’s very important.
If you’re not in the web design/development industry, then using even the most basic jQuery will more than likely impress your visitors! (It’s alright for some!)
Although I love jQuery, I have to disagree with your opinion that it’s the only way to make your website unique. If you have some skills in PS and HTML/CSS you can craft a stunning web design without using a single piece of JavaScript code.
I agree with you that using jQuery is not the only way to add spice to your site however these days, especially in the web design industry, every half-looked after websites looks stunning! jQuery is the way to move forward!
Thanks for your comment!
I also have to disagree.
I don’t think it’s jQuery. It’s just Javascript. Sure, jQuery makes it easier for all people to handle Javascript effects but I think jQuery isn’t THE thing that makes it special. It’s the Web 2.0 and his trends which are not revolutionized by jQuery. jQuery just does it on a simpler way. It’s not the next level. It’s the level of today.
I say, HTML5 is the “next” level.
btw. I’m also have to disagree about that before 2008 there were only a handful of sites which were on a high level. You can’t compare this. The Level isn’t similar to today. back in 2002, tables were the grates thing to make websites. So we could say: That was high level for that time.
Thanks for the comment René, much appreciated.
I agree JQuery is the “level of today” however believe it or not; there are still many awesome designers with stunning sites out there who have very little knowledge of jQuery and its possibilities! Thus, although it’s today’s technology, many out there are a little behind in this aspect of web technology and hence, need waking up!
HTML 5 is indeed the next stage on the web alongside CSS 3!
I’ll keep in mind your final comment and make sure I do a bit more research before posting such statements as “before 2008″. You have stated correctly that we cannot compare today’s quality of sites with those of 2008 due to the technology available however, leaving this aspect aside and comparing directly between sites from 2007 and now, we can come to a conclusion that many of the sites that use jQuery today look far more stunning than those in 2007 when jQuery was of very little use!
Thanks Again!
I agree with everything you said Faz, except for the use of the word _only_ when you say “only way to make the website unique.
jQuery is probably the fastest growing js library I have ever seen. It makes ajax easy, as well as data parsing, serialization, etc.
As the browser turns more and more into an application launcher rather than a document viewer jQuery is the right place to be.
These are nice plugins
I think Animation and Design are two totally different things. So if you can complement both there’s no doubt that you may get a better final product.
Anyway every project has different needs.
Good call.
They are very different things and to implement both together is an art in itself.
Thanks for the roundup, I know about most of these but I had not seen the captcha. I really like that and may have to put it to good use.
Heh heh, The captcha was new to me also and is my favourite from this list (excluding Tetris, of course!).
Thanks for the comment Rick!
JQuery is a framework that will eventually be replaced by native browser frameworks. It is still only javascript afterall, therefore cautious use of javascript will yield the same results. in conclusion it’s not the only way to spice up a site. My framework, however, creates another level of encapsulation that makes creating interesting things much easier. But creativity is always left up to the developer/designer.
Hi Ezrad.
Yes, jQuery is after all only JavaScript however many believe it is here to stay. One reason for this in my opinion is that, although it would be nice for a native browser framework, it’s unlikely to happen for a very long time (if it ever does) due to the relationship between the browsers (Microsoft, Mozilla, Google). However, it’s a grey area ATM.
Thanks for the comment! Much appreciated.
Very nice article. I love jquery!
Thanks!
Amazing posts, thanks for sharing – I’ve only recently just started with jQuery and I’m loving it !!!!
To be honest, I’m also not an expert on jQuery and JavaScript! Hoping to advance in these greatly soon.
Thanks for the comment! Much appreciated!
Pretty much the same as everyone else,
I love jquery to bit – i think it opens up total cross-browser effects and advanced flash-like pages without having flash, for instance iPhone or a dated browser that doesn’t support flash.
That’s one of the reasons why it rocks! It’s cross-browser compatibility!
BTW, your JQVibrator (http://tarnfeldweb.info/jqvibrator/) is awesome! Would have added it to this list if I came across it sooner!
Thanks for the comment!
Thanks so much!!
No problem!
jquery is great!! i lov it!!
I have numerous problems with my web browser Neoplanet on your site. The monkeys are in the page
.
Apologies breanne i. hartman!! I’ll have to download Neoplanet!
Great lists. That AJAX Fancy Captcha is kind of weird though
Very weird indeed!!
I wish I had this level of knowledge and experience. I’ve been struggling in this area for sometime and not able to break through – this information could be exactly what I need, thanks!
I’m sure with a little practice, you’ll be just as good!
Kick-ass collection of jQuery scripts. Very very useful. Keep up the good work.
Chandan
Really nice collection, i m developer and i know what is the importance of jQuery in these days..
thank you so much for sharing.
This may be off base, but how about changing the layout every now and then? Maybe not if it won’t look right, but I just get tired of seeing the same thing all the time. My own computer has about 1000 wallpapers that randomly rotate every 15 minutes, lol. Good post though, thanks.
Kelly Malthus
This blog helped me somewhat in narrowing down some issues with the latest release, Why do they always seem to leave out vital documentation when they upgrade? It may be minor to them but not to me. I’m sure i’m not alone either.
Hah hah, probably due to laznness?
coollllll….
Good review. I might do a similar post about this myself.
Another thing, liking the blog layout. I used to have a similar blog to yours before I sold it.
Great article.
“Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with extra information? It is extremely helpful for me.”
i don’t usually reply to posts but i will in this case. i like jQuery!
jQuery. I like the Password Strength Meter, cool.
Thanks for the roundup, I know about most of these but I had not seen the captcha. I really like that and may have to put it to good use…
I like jquery, however I feel that it is currently being overused in webdesign. Use it with care and only if it is functional.
The same thing can be said about Flash, that is overused. I don’t see too many interesting examples using jQuery, most used with a specific function though.
No matter how funny a script may look on your website, always use The W3C Markup Validation Service.
I love jquery, and I think that if you use it properly, it can give your website that edge over other sites.
There definitely seems to be a jquery fashion happening at the moment, but Im not complaining, because I really like how they look (but only if it is carried out properly). I also like how many different uses jquery has.
Many thanks for the article, was a good read!
Very Nice and great jquery scripts
thanks
Thanks for the great script list. I have used jquery sliding panel script in one of my underconstruction website, but its a bit buggy to me. not sure if its my css issue or actual script is not flexible. anyone tried this? I’m trying to implement this script on this template http://www.templatesrule.com/web-templates/view-template-2857.html i purchased it yesterday and trying to edit now. current zoom script on this template is conflicting with sliding panel i guesss. any suggestion?
Good post, I’ll definitely be check your blog often keep it up.
Thanks for the roundup, I know about most of these but I had not seen the captcha. I really like that and may have to put it to good use.
This is very interesting post, thanks.
Very great post. I simply stumbled upon your weblog and wished to say that I have really loved surfing around your blog posts. After all I will be subscribing in your rss feed and I’m hoping you write once more soon!
Hi,
Thanks to share this. I have checked all most all plugin and they are good.
I am thinking to use these plugin on my site.
Thanks
jQuery animation technique is a fast and one of the best ways to promote your online business. It can be frequently used to create product reviews, news and exceptional deals. It is an effective way to advertise, if you can provide some quality web design graphics to showcase your product or service.
Thanks for this very useful and incredibly well structured article.
tetris? my sites don’t need tetris
But cool effects overall.
I cud use the password strength meter, the log-in panel and the “Fancy Captcha”. They would really work for log-in/register scripts.
Thank you.
I’d seen all of these exept the Captcha and the password strength meter.
great collections. thank u so so much !!
Really nice collection, i m developer and i know what is the importance of jQuery in these days..
thank you so much for sharing.
I LIKE THAT! Very Amazing job bro.
Try http://learnjavascript.co.uk, for tutorials on JavaScript and jQuery from beginner to advanced, including complete references.
anyone knows a free popup login for download? thanks
Nice thanks for it