Best jQuery HTML5 Plugins & Tutorials with Demo

    howler.js : Modern Html5 Web Audio Javascript Library

    howler.js : Modern Html5 Web Audio Javascript Library

    Howler.js is a JavaScript library that works with Web Audio API by default and falls back to HTML5 Audio when not supported.

    Features:

    • Defaults to Web Audio API
    • Falls back to HTML5 Audio
    • Supports multiple file formats to support all browsers
    • Automatic caching for Web Audio API
    • Implements cache pool for HTML5 Audio
    • Per-sound and global mute/unmute and volume control
    • Playback of multiple sounds at the same time
    • Easy sound sprite definition and playback
    • Fade in/out sounds
    • Methods can be chained
    • Uses no outside libraries, just pure Javascript
    • Lightweight, 7kb filesize (2kb gzipped)

    jQuery Push-state Navigation plugin

    jQuery Push-state Navigation plugin

    Enable the new push-state navigation in your web site.This plugin enables the new html5 history API on your web site.

    jquery.spidergraph : Interactive HTML5 Spider Graph module for jQuery

    jquery.spidergraph : Interactive HTML5 Spider Graph module for jQuery

    jquery.spidergraph is a simple module that creates nice looking, interactive spidergraphs in HTML5, using the canvas element.

    Features:

    • illustrating scaled quantitative data for several subjective attributes
    • overlaying multiple data measurements for attribute comparison
    • visualizing the intersection of several data measurements

    Literally Canvas : HTML5 drawing widget with jQuery

    Literally Canvas : HTML5 drawing widget with jQuery

    Literally Canvas is an extensible, open source (BSD-licensed), HTML5 drawing widget that currently supports a minimal set of drawing operations. You can draw, erase, set the color with the eyedropper, undo, redo, pan, and zoom. It depends on jQuery and Underscore.js.

    The instance at the top of this page uses the resizable feature of jQuery UI for its resize feature, to demonstrate that you can resize the container element with impunity. Resizing on the right edge of the canvas causes weirdness, but you get the idea.

    CanvasQuery : jQuery Html5 Canvas Library for Game Developers

    CanvasQuery : jQuery Html5 Canvas Library for Game Developers

    Canvas Query is a wrapper library for HTML5 Canvas element which allows it to be used with jQuery like syntax. Also it adds a lot of common use image manipulation methods mainly convenient for gamedevelopers.

    Responsive Slideshow Photo Gallery Grid with Html5

    Responsive Slideshow Photo Gallery Grid with Html5

    The Responsive Slideshow Photo Gallery has a fluid / flexible / responsive layout. Basically the grid is added into a html page into a div of your chosing and it’s adapting based of that div’s width, the grid height is modified based on the number of thumbnails and if other elements are below the grid div they will be pushed down automatically (document flow). In the examples provided you can see a few ways in which you might use this grid, of course that other configurations are possible.

    Pure OOP JavaScript code, no usage of jQuery or other libraries, in this way there will be no incompatibilities with HTML pages that might be using jQuery or other JavaScript libraries.

    The Responsive Slideshow Photo Gallery is using the GPU (hardware acceleration) using HTML5 standards. The rendering speed and performance is impeccable on desktop computers and most importantly on mobile devices, the way it works it will try to use CSS3 and if this is not available it will down fall to CSS2 or CSS1 for older browsers like IE7 and IE8.

    iPhone Style Dragging for Both Desktop and Mobile with jQuery

    iPhone Style Dragging for Both Desktop and Mobile with jQuery

    When we create stuff for the web now it’s important we remember that the web has spread from the trackpad and mouse to the touch screen. Sometimes this is hard to accomodate for, but it’s not that hard to create some awesome cross device friendly touch and drag events with HTML5 and some smart styling!

    I’ve made a little plugin that lets you grab and drag your way through a bunch of pictures of album artwork, similar to you drag through objects on an iphone at the start screen. Check out the demo to get a feel for what we’re going to be creating. The plugin isn’t too difficult to understand and you can download the finished version above, but when I first designed it, it only worked with mouse drags.

    FastLinks : jQuery Load all content with ajax

    FastLinks : jQuery Load all content with ajax

    FastLinks is a library which allows you to load the links on your website with ajax calls. With this library your website will load a lot faster. This library uses jQuery and the html5 history API. (The history api works in all browsers except IE, but the library works in all browsers. The only is that the url in the navigation bar updates in all browsers but IE). This plugin is tested in: IE7, IE8, IE9, Chrome 23, Firefox 15, Safari 5 and Opera 12.

    Dynamic Newsletter Signup Form with jQuery Animations & CSS3

    Dynamic Newsletter Signup Form with jQuery Animations & CSS3

    The dynamic form effects will be handled in jQuery with some additional CSS3 properties as well. I haven’t connected any backend script into the form. But there are methods for situating a full registration form, such as MailChimp or even your own custom storage. This layout is a fantastic example of what can be accomplished using just a little bit of HTML5/CSS3 and JavaScript techniques.

    EasyAnimationFrame.js : JavaScript Html5 RequestAnimationFrame API

    EasyAnimationFrame.js : JavaScript Html5 RequestAnimationFrame API

    Unfortunatelly the new RequestAnimationFrame API does not allow us to set the framerate, but using EasyAnimationFrame.js you can run html5 canvas or html animations having the complete control of the framerate. Using this script you get a complete cross browser suppor.