- 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
- Lightweight, 7kb filesize (2kb gzipped)
Enable the new push-state navigation in your web site.This plugin enables the new html5 history API on your web site.
jquery.spidergraph is a simple module that creates nice looking, interactive spidergraphs in HTML5, using the canvas element.
- illustrating scaled quantitative data for several subjective attributes
- overlaying multiple data measurements for attribute comparison
- visualizing the intersection of several data measurements
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.
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.
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.
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.
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 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.
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.