Best jQuery HTML5 Plugins & Tutorials with Demo

MotionCAPTCHA – jQuery Captcha plugin

jQuery Captcha plugin

MotionCAPTCHA is a jQuery CAPTCHA plugin, based on the HTML5 Canvas Harmony procedural drawing tool by Mr Doob and the $1 Unistroke Gesture Regonizer algorithm (and the more recent Protractor algorithm improvement), requiring users to sketch the shape they see in the canvas in order to submit a form.

Fullscreen Slideshow with HTML5 Audio and jQuery

Fullscreen Slideshow with HTML5 Audio and jQuery

In today’s tutorial we’ll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sounds with the HTML5 audio element in order to give life to the gallery and try to recreate the ambient of this vibrant city.

TagCanvas – jQuery Animated Tag Cloud

jQuery Animated Tag Cloud

An HTML5 canvas-based plugin which replaces <a href="..."> links with a 3D rotating cloud of tags.

Tested in FireFox, Chrome, Opera, Safari. Also tested in IE8, where it obviously doesn’t work except in conjunction with ExplorerCanvas. Now works in the IE9 beta/release candidate without ExplorerCanvas.

Open Source HTML5 Audio Player: Boombox.js

html5 jquery audio player

HTML5 introduces the audio element which offers a way to play audio natively in the browser. However the native controls are a little lacking in style. Thankfully HTML5 also brings Media Element API to interact with which allows us to skin an Audio object however we want.

Geo Location with HTML5 and Jquery

google Geo Location with HTML5 and Jquery

Last few days I have been working with HTML5 elements, it’s very interesting. This post explains you how to get geo location latitude and longitude values using Jquery. I found a geocode location script from html5demos.com and I have customized bit of code. It is useful you can built foursquare kind of location check out web application.

Create A Multiple URL Shortener Page

jquery Multiple URL Shortener Page

There are various url shortener services on the Internet, you can use free services such as bit.ly, tinyURL or create your own url shortener using some open sources. In this article, I’ll show you how to create a simple page that shows short urls created by multiple url shortener services. I’ll use HTML5, CSS3 for styling as well as jQuery for working with Ajax.

Open Standard Media (OSM) Player in jQuery

Open Standard Media (OSM) Player in jQuery

Open Standard Media (OSM) Player is an all-in-one media player for the web. It is an industry changing, open source (GPLv3) media player that is written in jQuery to dynamically deliver any type of web media, including HTML5, YouTube, Vimeo, and Flash.

A Snazzy Animated Pie Chart with HTML5 and jQuery

A Snazzy Animated Pie Chart with HTML5 and jQuery

In this tutorial I’m going to show you how to build a lovely, interactive pie chart using the latest HTML5 technologies. Not that long ago, this kind of thing was only practical to do with Flash. Now, thanks to advances such as the HTML5 canvas element, we can create pretty nifty animated effects using nothing but JavaScript, CSS, and a small sprinkling of maths!

Creating a CSS3 Generator with CSS3, HTML5 and jQuery

Creating a CSS3 Generator with CSS3, HTML5 and jQuery

Many of you have probably already seen some of those CSS3 generators that have been poppin’ up? Have you perhaps been wondering how they’re made? Wonder no more, that’s what we’ll be creating today, using CSS3, HTML5 and jQuery.

The CSS3 generator we will be creating is Webkit only, so make sure you open up the demo in a Webkit browser like Safari or Chrome.

BeautyTips a jQuery tooltips plugin

BeautyTips a jQuery tooltips plugin

BeautyTips is a jQuery tooltips plugin which uses the canvas drawing element in the HTML5 spec to dynamically draw tooltips associated with a html element on the page. The thing I like best about BeautyTips is it’s limmitless ways to configure the look and feel and event triggering behavior. For example, with BeautyTips it would be relatively easy to match the tooltips used on popular websites like Netflix, Google Maps, Hulu, or Facebook.