Best jQuery HTML5 Plugins & Tutorials with Demo

Cropit : jQuery Customizable Crop and Zoom Plugin

Cropit : jQuery Customizable Crop and Zoom Plugin
  • A jQuery plugin for image cropping and zooming.
  • Loads images locally via FileReader, and does cropping using canvas.
  • Designed to be extremely customizable via CSS.
  • Best for the cases where you want users to upload images of a specific size and ratio.

Scratch.js : HTML5 Scratch Card

Scratch.js : HTML5 Scratch Card

Scratch.js is a standalone library which brings interactivity to your website by allowing you to generate scratch cards for your visitors. Based on HTML5, scratch.js generate canvas on the fly and is optimized for all modern browsers and has touch support for mobile devices. You can use it to make scratch cards, coupons, promotionnal game and even advertisement.

Features:

  • Touch support: works on IOS, android, windows phone
  • Lightweight, with no external dependencies
  • include working examples to avoid starting from scratch
  • PSD file included
  • Flexible and fully configurable

gridscrolling.js : jQuery plugin for layout your HTML5 article

gridscrolling.js : jQuery plugin for layout your HTML5 article

A layout for HTML5 articles, positioning sections and asides in a grid, allowing easy navigation with cursor keys.

3dbook : 3D Book Created with jQuery & CSS3

3dbook : 3D Book Created with jQuery & CSS3

This is 3d book created all by myself. All book is made by HTML5, CSS3 transitions and bit of javascript / jQuery code.

HTML Builder with jQuery & Bootstrap

HTML Builder with jQuery & Bootstrap

HTML Builder is a nifty little Javascript application which allows end-users to easily compose custom HTML designs using pre-defined HTML elements. The HTML Builder script comes with several sample HTML elements (the ones as displayed in the live demo), however the script really shines when used with your own custom HTML elements!

Features:

  • build custom HTML pages using predefined HTML elements
  • create your own custom HTML elements with ease
  • integrates seamlessly with CSS frameworks (like Bootstrap, Foundation, etc)
  • create multiple pages in one session
  • export the created pages (incl CSS, Javascript and images)
  • basic editing of written content (only available for non IE browsers)

Ultra : jQuery Html5 Video Player

Ultra : jQuery Html5 Video Player
  • custom HTML5 player theme
  • custom Vimeo player theme
  • custom Youtube player theme
  • optional poster image
  • custom player size
  • optional embed option
  • optional facebook share
  • optional twitter share
  • optional mail share
  • optional logo (set position to bottom-left corner, or bottom-right corner, set URL redirect when clicked)
  • you can disable individually logo/embed/facebook/twitter/mail/info if you dont need these features
  • autohide controls: you can choose after how much seconds player controls will disappear
  • optional autoplay
  • optional right-click (to prevent downloading hosted videos)
  • optional player shadow (set one of 6 pre-built shadow effects)

jqScribble : A touch enabled Canvas Drawing Tool Plugin

jqScribble : A touch enabled Canvas Drawing Tool Plugin

jqScribble is a jquery plugin that will allow you to draw on an HTML5 canvas element. It works with standard mouse input and also touch input. It is designed to be extremely extensible, allowing for custom brushes and image saving. I have also provided with this plugin a sample PHP file that will demonstrate turning drawn images into actual images.

jQuery fullsizable plugin

jQuery fullsizable plugin

jQuery plugin to make use of the full available browser space for enjoyable image viewing. Also supports the native HTML5 fullscreen API in modern browsers.

shCircleLoader : HTML5 Circle loading animation jQuery plugin

shCircleLoader : HTML5 Circle loading animation jQuery plugin

shCircleLoader is a jQuery plugin, which helps web developers to create a variety of loading animations and integrate them easily into their web applications.

Features:

  • Customizable animation controlled by a wide range of options.
  • Normally you do not have to include CSS file, but you can do this turning off CSS styling from the script.
  • CSS “namespaces” allows you to create different loading animations in one page.
  • Custom CSS keyframe animtion declarations.
  • Optional progress status in the center of the animation.

Cajal : JavaScript library to Animate shapes on HTML5 Canvas

Cajal : JavaScript library to Animate shapes on HTML5 Canvas

Cajal is a javascript library to draw and animate shapes on the HTML5 canvas element.

Cajal provides object oriented functionality to draw and animate shapes on the canvas element. You can easily reuse animations or complex shape-objects in other projects, as every shape can be assinged to as many canvas elements on your site as you like.