in Design

20 Useful jQuery Plugins That Will Make Your Work A Lot More Easier

Creating a website is fun if you these 4 important “tools”: css, html, php and jQuery.  I’m not says that you need to be a guru, but if you even their fundamentals, you can build great websites. Thanks to the huge community of web developers, today is extremely easy to find tutorials or snippets that will make your job a lot more easier and efficient. In this article you have a collection of very useful jQuery plugins that will help you create various things starting from adding an awesome scroll effect to your site and all the way to creating intricate heat maps to see how the viewer is using your website. If you are new to jQuery I suggest you to save these plugins because you never know when you’ll need them.

jQuery Infinite Social Wall

A very simple way ho to create a heat map with jQuery. The idea is to track the clicks of a user and then display the click pattern with semi-transparent dots on an overlay.

Demo | Source

How to add Floating share box to your website with jQuery

In this tutorial, I will use same jQuery code from Chris Coyier’s article and will add some bits and pieces to build a floating share box. Keep in mind this is not a plugin, but can be integrated with static as well as dynamic sites.

Demo | Source

Status.js : Check your website for broken links with jQuery

A full client side tool, but still it makes a lot of requests to the server to crawl the entire website.

Demo | Source

jQuery Heat Map

A very simple way ho to create a heat map with jQuery. The idea is to track the clicks of a user and then display the click pattern with semi-transparent dots on an overlay.

Demo | Source

AliceJS : A Independent CSS Engine for high-end visual effects

A micro JavaScript library focused on using hardware-accelerated capabilities (in particular CSS3 features) in modern browsers for generating high-quality, high-end visual effects.

Demo | Source

D3.js : Data-Driven Documents

A JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS.

Demo | Source

Pull Off Awesome Scroll Effects With Stroll.js

It’s a super easy to implement library that makes applying mind-boggling scroll effects a breeze. All you have to do is paste in a couple of brief lines of JavaScript, the rest is all handled with HTML and CSS. Keep reading and I’ll show you how it works.

Demo | Source

Downloadify

A tiny JavaScript + Flash library that enables the creation and download of text files without server interaction.

Demo | Source

Bookflip : JavaScript Page Turn effects

Totally JavaScript Book Flip for page turn effects. Bookflip engine has been totally rebuilt for better modern browser performance (IE8 & 9).

Demo | Source

How to Make an Interactive Network Visualization with JavaScript

Learn how to make one using D3 and JavaScript. This visualization is a JavaScript based web application written using the powerful D3 visualization library.

Demo | Source

Flickr Badge v2 : Displaying your flickr photos

Here you can download a script to add a flickr badge like the following to any HTML document or blog with some HTML and a JavaScript include.

Demo | Source

How to create an animated old letter in JavaScript

In this letter, we will use an animated pen. When the pen dries out – we’ll dip it in the ink. And even more, we add the feature to emulate the errors that will be erased during typing.

Demo | Source

Chirp.js : Simply Tweets on your website with JavaScript

A simple way to Tweets on your website with javascript.Chirp js ia very lightweight, Templating and Client-side caching features.

Demo | Source

Treesaver.js : Creating magazine-style layouts with JavaScript

A JavaScript framework for creating magazine-style layouts that dynamically adapt to a wide variety of browsers and devices.

Demo | Source

SwipeView : Infinite Carousels For Mobile Web with JavaScript

Super simple solution to endless seamlessly loopable carousels for the mobile browser.

Demo | Source

SpectragramJS

Easy jQuery plugin for Instagram API to fetch and display user, popular or tags photo feeds inside your web application or site.

Demo | Source

Full Screen Responsive jQuery Image and Content Slider : RSlider

If you are not the programmer or you just don’t want to re-invent the wheel, RSlider is for you. It’s a full screen responsive image and content slider powered by the fantastic javascript library jQuery.

Demo | Source

tiltShift.js

A jQuery plugin that uses the CSS3 image filters to replicate the tilt-shift effect. This is a proof of concept and currently only works in Chrome & Safari 6.

Demo | Source

Freetile.js

A plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout.

Demo | Source

Bogdan

Bogdan is the founder of Top Design Magazine. You can find him in Bucharest-Romania so next time you want to drink a beer there and talk about web and stuff, give him a message.

Leave a Reply