Learning jQuery

The internet has loads of jQuery plugins to help to create the blurry effect that is so in style these days. However, it may be tough to choose which plugin is best suited for a particular website. Here are some of the best jQuery plugins available online which are lightweight and super easy to use.

1. Foggy

Foggy is one of the best plugins for creating a blur effect. It's supported by all the major browsers that are available on the internet and can also be used manually to create the blurring effect.

2. BlurBox

Lightboxes are elements that blur the background so that the visitor can focus on the main object of the website. BlurBox is one of those lightboxes which does this and more. BlurBox can darken the background, lighting up the required region only.

3. Blur.js

Blur.js is a fun jQuery plugin which simply blurs out the background and highlights the important parts of the website. It also can create blurring elements over elements with the help of simple codes.

4. BlurryBackground

BlurryBackground helps in caching the blurred background, which helps to prevent CPU lagging. It also helps in auto blurring the background of a website, preventing the upload of large images, and saving bandwidth in the process. It's easily integrated to any website and helps in the creation of blurred backgrounds with ease.

5. Blurry Menu

Blurry Menu is a content sensitive jQuery plugin for creating blur effects. It blurs out specific programmed contents like images, background images and texts and is added dynamically. Pre-existing scripts like Canvas and Superfast Blur are used to get the desired results.

6. Vague.js

Although experimental, Vague.js is a pretty awesome jQuery plug in for creating blurry effects. It usually uses CSS filters for blurring out all possible kinds of HTML documents. However if it detects the unavailability of CSS, it uses either Microsoft CSS or SVG filters to attain the desired results.

7. Spoiler Alert

Spoiler Alert, which is compatible with browsers like Firefox, Chrome and Safari, provides users with simple codes to partially or completely blur out images. The images can be brought back into focus by hovering the mouse over it and clicking. This helps to create a mysterious look for websites.

8. Hoverizr

Hoverizr is one of those jQuery plugins which not only aids in blurring the background but also allows grey scaling of the image or inversing the color of the image. The greatest advantage of this plugin is its size, which is just 2.5 KB. It is easily integrated with  websites and works smoothly with all leading browsers.

9. Blurr

Blurr is one of the easiest jQuery plugins to use and works perfectly with all browsers. It blurs out the background images of a website from any kind of image, size is not a factor.

10. StackBlur

StackBlur uses Canvas to provide users with the result they are aiming for. Easy to download and install, it was created by Mario Klingemann, Quasimondo. It blurs out chosen content and also allows complete blurring of background images.

11. Oblurlay

Released under MIT license, Oblurlay creates blurring effects just like those created by the iOS. It utilises SVG, CSS and jQuery to create the required blur, depending on the system that is being used. It works pretty smoothly with Chrome and Safari. The jQuery plugin is pretty easy to download and install too.

12. Crystal Gallery

The best part of Crystal Gallery is the fact that it is customizable on several levels which helps users to achieve exactly what they want. It provides a single gallery of solutions for all image problems. It also helps in resizing the image according to the screen size that is being worked on.