Best jQuery HTML5 Plugins & Tutorials with Demo

    Droptiles : Metro style dashboard in jQuery, HTML5 & CSS3

    Droptiles : Metro style dashboard in jQuery, HTML5 & CSS3

    Droptiles is an Open Source Windows 8 Start like Metro style Web 2.0 Dashboard. It builds the experience using Tiles. Tiles are mini apps that can fetch data from external sources. Clicking on a tile launches the full app. Apps can be from any existing website to customized website specifically built to fit the Dashboard experience. Droptiles is built almost entirely of HTML, Javascript and CSS and thus highly portable to any platform.But with very little change you can port it to PHP, Ruby, JSP or any other platform.

    Features:

    • Metro style user interface. CSS framework to build metro style websites, inspired by metroui.org.ua.
    • Drag & Drop tiles to personalize the experience.
    • Live tiles: Tiles are mini-apps, loading data from variety of sources.
    • Quick and easy App framework. Try the Flickr and News Reader app.
    • Client side object model and data binding for easy MVVM implementation.
    • Server side platform neutral implementation. Can be ported to PHP, JSP easily.

    jQuery.BlackAndWhite : Convert Colored image into B&W Greyscale Image

    jQuery.BlackAndWhite : Convert Colored image into B&W Greyscale Image

    This plug-in can easily convert every colored image (in an html page) into a B&W greyscale image.It uses the the HTML5 canvas tag and a fallback for the old browsers

    MelonHTML5 : Royal Preloader with jQuery

    MelonHTML5 : Royal Preloader with jQuery

    Royal Preloader allows you to easily setup website images preloading in a loading screen and display the entire website instantly when it finishes. It comes with 8 pre-designed loaders and is super easy to install. All web browsers and mobile devices are fully supported. And all options can be customized via API.

    Features:

    • Preloading Website Images
    • 8 Pre-Designed Loaders
    • Display Loading Details
    • Fully Customizable
    • Easy to Install
    • CSS3 animations + Fallback for IE
    • Mobile Device Support

    Liquid Slider : jQuery Html5 Responsive Content Slider

    Liquid Slider : jQuery Html5 Responsive Content Slider

    The Liquid Slider is a fully responsive, html5 content slider, which means it will work on your desktop as well as your mobile device. It’s fully adaptable to changing widths and orientation, so ahead and resize your browser to see it in action.

    jCanvaScript : JavaScript Library to manage Html5 Canvas Element

    jCanvaScript : JavaScript Library to manage Html5 Canvas Element

    jCanvaScript is a javascript library that provides you methods to manage with the content of a HTML5 canvas element easily. It runs on any platform (including iPhone, iPad, Android) that supports canvas and JavaScript. To add support for canvas in Internet Explorer you can use ExCanvas.

    Features:

    • Fully Object Oriented
    • Provides access to the canvas context
    • Provides mouse-events to all objects
    • Provides keyboard-events to all objects
    • Provides drag’n’drop
    • Easy methods to manage objects
    • Provides easy objects animation

    jQuery Image Color Up Plugin

    jQuery Image Color Up Plugin

    With Color-Up jQuery plugin easily add beautiful hover effects to your images, add transitions from (and to) a monochrome, sepia, negative, darkened or lightened version of the image.

    SPEAKKER : JavaScript & HTML5 Crossbrowser Audio solution

    SPEAKKER : JavaScript & HTML5 Crossbrowser Audio solution

    Comes out of the box in two variations and with incredible options of customization: Flexible dimensions, unlimited colors and two different button sets for light and dark themes. Easy to set up. Just a few lines of Javascript and a quantum CSS.

    jQuery HTML5 Fullscreen Slideshow

    jQuery HTML5 Fullscreen Slideshow

    This jQuery plugin lets you create fullscreen galleries where the slides are shown on the entire screen using the fullscreen APIs provided by Firefox 10+ and Chrome 15+ (and possibly Safari 5.1+).

    In all other browsers it falls back to displaying the slideshow in the entire viewport.

    jQuery powered HTML5 navigation menu

    jQuery powered HTML5 navigation menu

    This is a simple HTML5 and jQuery powered navigation menu. It uses some simple CSS3 for some minor presentational enchancement (like border-radius and text-shadow).

    The purpose behind it’s creation was to provide a semantic and easily implemented way of creating simple good-looking site navigation. In that spirit, it’s usage is incredibly simple.

    JavaScript Gauges in Metro Style

    JavaScript Gauges in Metro Style

    JavaScript Gauges in Metro Style is a set of 8 gauges created in the modern Windows8 or Metro style which can be added to virtually any web application: ASP, ASP.NET, PHP, JSP, ColdFusion, Ruby on Rails, and simple HTML pages.The gauges included into the package are not just separate meters, sliders, etc. They can be used as full featured ready gadgets intended to display the information in a visually appealing way.

    Features:

    • Cross-platform compatibility. The gauges can be used on any platforms: ASP, ASP.NET, PHP, JSP, ColdFusion, Ruby on Rails and simple HTML pages and accessed from any devices: desktop, laptop, mobile (including iPhone and iPad), and via any browsers: IE, Mozilla Firefox, Google Chrome, Opera, Safari, etc.
    • Declarative description. The gauges are described using declarative selection of the parameter in JSON.
    • Customization. You can set any parameters describing your gauge and create custom objects using JSON.
    • Interactivity and Animation. Every gauge provides customizable interactivity and animation.
    • Easy styling. A gauge styling can be easily modified in CSS.
    • Callback support. You can get notifications about changes of the gauge value and handle it in JavaScript.
    • Easy integration. To integrate a gauge you just need to specify gauge name and area of a webpage where it should be inserted (“div” tag); and all this with JavaScript.
    • WinRT compatible. The gauges can be integrated into HTML5-based WinRT applications to effectively visualize data.