JQuery has made it easier for designers and developers to quickly add functionality and style to their websites. New plugins are coming out faster than we can keep track of them, and it's become a challenge to know which are ready for production and which are still in testing.
This collection focuses on some tested and approved jQuery plugins that are changing the way we build websites. Some are a bit old but still have excellent tips for creating wonderful effects for us to use. Others are cutting edge and just hit the streets. If you end up using some of these, let us know and show off your work!
While not a new entrant to the jQuery field, Lettering.js still has a huge impact on design and makes it so much easier to create search engine friendly, selectable text that is off the wall beautiful. Check out some of the sample sites that are putting this plugin to work.
Ready to replace GIFs, videos, or Flash for basic rotating ads or other motion-based elements on your site? Metro JS gives you a number features that are CSS3/HTML5 based and allow you to create a number of dramatic effects with ease. One of the bigger advantages to this approach is that the results are search engine friendly and light-weight.
I love blur effects and generally have to integrate a PNG to make it work. But with Blur.js, you can create a number of dramatic blur effects and create amazing layers. The effect is stunning and has a number of applications. In combination with other plugins (Lettering.js and others), this can create some amazing designs without bulky PNG images.
If your site is image intensive, like this one, then you can save a load of bandwidth using this plugin. It delays the download of images based upon various triggers that you can define, such as timers or when the image is actually in view. You can also use the resulting server logs to see just how many images are being viewed per post to give you some extra analytics data.
This plugin was a game changer for me. It allows for responsive, swipeable image galleries for mobile devices that rely on touch screens. But the plugin works great on desktop computers as well! You can grab and swipe with your mouse or just click through like you normally would with a carousel app. The result is a cross-browser, cross-device image viewer that looks and works great.
Creating a fluid image montage is a serious challenge and very time-consuming. But for graphic intensive sites, this is a very effective way to create an engaging experience. The Automatic Image Montage plugin lets you quickly throw down a montage with some simple features for filling in gaps. It doesn’t get much easier than this, and the fluid handling of screen resolutions is really slick.
I like plugins that work both on standard and mobile devices. Turn.js gives you a page-turn effect that works on browsers of all kinds and is responsive to touch. Excellent for guiding a viewer through a process or portfolio, it gives a stunning presentation and is easy to implement.
A stunning library of effects that work as the user scrolls through your single page site or just a long page. Effects include text explosions, rotation, parallax, and fades. It’s easy to add the effects, and in conjuntion with other plugins can create amazing effects.
This is one you have to see to believe, so click on the source link below and be amazed. The text effects are like that of a movie where text falls off the screen, swaps places, fades in and out, and more. Just plain stunning and very lightweight at 5.3kb.
A nice, simple way to create simple zooming effects as users hover over any element on the page. With ZoomerForjQuery.js, you can define how much the zoom effect works. It’s very lightweight at 2kb. Simply define an element you want to zoom as the user hovers over it and you’re done.
Are there any jQuery plugins that you think should have been included in this list?