Best jQuery HTML5 Plugins & Tutorials with Demo

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.

Stitches : HTML5 Sprite Sheet Generator

Stitches : HTML5 Sprite Sheet Generator

Stitches is an HTML5 sprite sheet generator.

CodeTabs – jQuery Touch Responsive Tabs

CodeTabs - jQuery Touch Responsive Tabs

Codetabs is a great plug-in tabs when integrated gestrue swipe, move between slides really easy on desktop and mobile. No need to switch troublesome dropdown menu as the other plugin on the mobile. Same time create thousands of beautiful effects with built-in over 250 ‘out-in’ effects and ‘one’. Also, codetabs built-in responsive features, vertical tabs, flat and clean theme, powerfull API, 40+ templates html, 14+ positions, 100+ options, more and more.

jLayout : JavaScript Layout Algorithms

jLayout : JavaScript Layout Algorithms

he jLayout JavaScript library provides layout algorithms for laying out components. A component is an abstraction; it can be implemented in many ways, for example as items in a HTML5 Canvas drawing or as HTML elements. The jLayout library allows you to focus on drawing the individual components instead of on how to arrange them on your screen.