Best jQuery HTML5 Plugins & Tutorials with Demo

Shooting Range Game with HTML5 Canvas

Shooting Range Game with HTML5 Canvas

Shooting range game with HTML5 canvas.

Upload Preview jQuery Plugin

Upload Preview jQuery Plugin

This jQuery plugin provides an easy way to preview your uploads before they’re actually uploaded to the server. So if you selected an image or audio file from your hard drive, it will generate a live preview of the selected image or audio player for the audio file.

ComicBubbles : Speech balloon JavaScript library

ComicBubbles : Speech balloon JavaScript library

ComicBubbles is a JavaScript HTML5 canvas library which simplifies the process of adding speech bubbles to photos. ComicBubbles bubbles can be saved as JavaScript objects or merged with the original image.

Key features:

  • small size, framework-independent
  • can produce interactive, animated speech|thought|scream balloons
  • API

jQuery Meme Generator Plugin

jQuery Meme Generator Plugin

Meme Generator is a jQuery plugin allowing easily creating images with captions (memes). It doesn’t require any special markup, you can use it on any <img> and the plugin will handle the rest. It uses HTML5 Canvas to create images.

Features:

  • Seperate styling for each text box
  • Drawing tool with customizable color and size
  • Two preview modes – canvas and CSS – latter being more suitable for slow machines
  • Saving image as data url or canvas
  • Predefining captions

Fileuploader : Beautiful and powerful HTML5 File Uploading Tool

Fileuploader : Beautiful and powerful HTML5 File Uploading Tool

Fileuploader is a beautiful and powerful HTML5 file uploading tool. A jQuery and PHP plugin that transforms the standard file input into a revolutionary and fancy field on your page.

  • File preview with image thumbnail or icon
  • File image thumbnail can be generated in canvas to resize it perfectly for given with and height
  • Render synchron the file preview
  • File icon background is generated from file extension
  • Customize your own input and thumbnail elements
  • Responsive and fancy animations
  • Choose multiple files from different folders
  • Drag&Drop feature
  • Upload each file with Ajax
  • Upload synchron the files
  • Upload progressbar with many data available
  • Start, retry and cancel upload actions
  • Paste images from clipboard (only in Chrome)
  • Validate the file’s limit, size and extension. You can also use your own function
  • Edit mode for already uploaded files
  • All files are in one list in a hidden input
  • Use input HTML attributes to configurate it
  • HTML template renderer using Text variables
  • CSS file icon
  • PHP upload helper
  • PHP generates an array with many file informations
  • PHP can create a custom file name
  • API and more than 24 Callbacks to manipulate freely the appearance and functionality of your file input

InfiniteRPS : Simple Browser Game with jQuery & HTML5 Canvas

InfiniteRPS : Simple Browser Game with jQuery & HTML5 Canvas

Simple browser game built with JS, jQuery and HTML5 Canvas. A simple sidescrolling RPS game that pits you, a shape shifter, against an infinite amount of rocks, pieces of paper, and pairs of scissors. Shift into the correct form to defeat your foes! Levels become progressively more difficult as the number of enemies and the speed at which they approach increases.

Loud Links : JavaScript library for adding Interaction Sounds

Loud Links : JavaScript library for adding Interaction Sounds

A simple tiny Javascript library to add interaction sounds to your website.The library creates HTML5 audio element and uses it to play mp3/ogg audio files which is currently supported in all browsers.

Timeline Framework with HTML5 & CSS

Timeline Framework with HTML5 & CSS

AWSM Timeline’ is a pack of super cool and interactive timeline layouts for your website. It is rather a basic framework which you can use to build your own style of timeline layouts by making some basic CSS changes. This documentation will help you to integrate the layout easily into your existing HTML files.

Create a Dynamic Point Mesh Animation with HTML5 Canvas

Create a Dynamic Point Mesh Animation with HTML5 Canvas

A great tutorial by Dudley Storey where he teaches how to master a dynamic point mesh animation using Canvas.

HTML Canvas Gauges using JavaScript

HTML Canvas Gauges using JavaScript

Canvas Gauges is tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.



Best jQuery websites design awards