Best jQuery HTML5 Plugins & Tutorials with Demo

    jQuery Wave Plugin

    jQuery Wave Plugin

    jQuery plugin for drawing waves using HTML5 canvas 2d.

    Matrix Effect Using HTML5 and Javascript

    Matrix Effect Using HTML5 and Javascript

    Now a days I am playing around with HTML5 Canvas API and Java Script. It’s an amazing option to create animations.

    This weekend I saw The Matrix movie.This film known for it’s visual effect.
    I wrote one Matrix function In which I am filling canvas with “Matrix” word at random locations using Canvas fillText method. And I am calling that function using Javascript setInterval Method.

    FlipHTML5 : jQuery and HTML5 flip book maker for PDF

    FlipHTML5 : jQuery and HTML5 flip book maker for PDF

    FlipHTML5 is a free Flip Book Maker which can convert PDF to HTML5 & jQuery flipbook, also support converting MS Office, OpenOffice and Images to HTML5 and jQuery based page flip ebook.

    Add YouTube video, local video player, audio player, images, photo slideshow, text, links, bookmark and flash animation to enrich flip book and engage flipbook readers.Create life-like digital magazine in HTML5 & jQuery to works smoothly on mobile devices, including iPhone, iPad, Android phone, Android tablet.

    jQuery Dynatable : HTML5+JSON interactive Table plugin

    jQuery Dynatable : HTML5+JSON interactive Table plugin

    Dynatable is a funner, semantic, interactive table plugin using jQuery, HTML5, and JSON.

    Dynatable does three things:

    1. Normalize: It normalizes an HTML table into an array of JSON objects, where each JSON object (or record) corresponds to a row in the table.
    2. Operations: It sorts, filters, and paginates the JSON collection.
    3. Rendering: It renders the resulting collection from the operations back to the table.

    Signature Pad : jQuery plugin Records the Drawn Signature for later regeneration

    Signature Pad : jQuery plugin Records the Drawn Signature for later regeneration

    A jQuery plugin for assisting in the creation of an HTML5 canvas based signature pad. Records the drawn signature in JSON for later regeneration.

    Demos :

    HTML5 JavaScript Gem Game With Saved Scoreboard

    HTML5 JavaScript Gem Game With Saved Scoreboard

    Everyone is talking about HTML5 games and how they are the future of mobile gaming, but where do you start? What is it you need to do to create a game? In short the answer is actually “not much”, everything that I will be using in todays tutorial I’ve already covered in various different guises in my previous tutorials. We’ll be using only pure JavaScript and CSS in this tutorial and the images.

    WhatWeather : jQuery Weather’s Widgets plugin

    WhatWeather : jQuery Weather's Widgets plugin

    WhatWeather is a jQuery plugin which provides weather’s data. It uses worldweatheronline.com API to get, parse and deliver data in order to create weather’s widgets. WhatWeather provides data and let you manage the display. However, it uses Mustache. In this way, you can easely change the template of your widgets.

    You can get weather data from cities all over the world. The plugin uses the name of the city, geographic coordinate system, IP adresse or the HTML5 geolocation API. The plugin have also a client-server caching system by using Web Storage API and text file for the server side.

    rasterizeHTML.js : Renders HTML into the browser’s canvas

    rasterizeHTML.js : Renders HTML into the browser's canvas

    Draw a page/an HTML string/a Document to the canvas.For security reasons rendering HTML into a canvas is severly limited. Firefox offers such a function via ctx.drawWindow(), but only with Chrome privileges.

    To cope with the existing limitations, rasterizeHTML.js will load external images, fonts and stylesheets and store them inline via data: URIs or inline style elements respectively.

    Pixi.js : Super fast HTML 5 2D rendering engine

    Pixi.js : Super fast HTML 5 2D rendering engine

    Super fast HTML 5 2D rendering engine that uses webGL with canvas fallback.The aim of this project is to provide a fast lightweight 2D library that works across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of webGL. Also its fast.

    Features:

    • WebGL renderer (with automatic smart batching allowing for REALLY fast performance)
    • Canvas renderer (Fastest in town!)
    • Full scene graph
    • Super easy to use API (similar to the flash display list API)
    • Support for texture atlases
    • Asset loader / sprite sheet loader
    • Auto-detect which renderer should be used
    • Full Mouse and Multi-touch Interaction
    • Text
    • BitmapFont text
    • Multiline Text
    • Render Texture
    • Spine support
    • Primitive Drawing
    • Masking

    jQuery plugin for caching forms using HTML5 local storage

    jQuery plugin for caching forms using HTML5 local storage

    In this tutorial we’ll be utilizing the localStorage mechanism to store the current state of a form. This means that when the page is reloaded or the user re-opens the page after closing it the form will be populated with the previous values. For improved complexity, we’ll be storing the data as serialized JSON strings.