Best jQuery HTML5 Plugins & Tutorials with Demo

JointJS – JavaScript Diagramming Library

JointJS - JavaScript Diagramming Library

JointJS is a JavaScript diagramming library. It can be used to create either static diagrams or, and more importantly, fully interactive diagramming tools and application builders.Rappid is a diagramming framework for advanced applications, delivering the best of HTML 5 + SVG and providing you with the right tools to build outstanding products.

Features:

  • basic diagram elements (rect, circle, ellipse, text, image, path)
  • ready-to-use diagram elements of well-known diagrams (ERD, Org chart, FSA, UML, PN, DEVS, …)
  • custom diagram elements based on SVG or programmatically rendered
  • interactive elements and links
  • connecting diagram elements with links
  • customizable links, their arrowheads and labels
  • links smoothing (bezier interpolation)
  • magnets (link connection points) can be placed basically anywhere
  • hierarchical diagrams
  • serialization/deserialization to/from JSON format
  • highly event driven – you can react on any event that happens inside the paper
  • zoom in/out
  • touch support

ckin : HTML5 Video Player using Javascript

ckin : HTML5 Video Player using Javascript

ckin is a opensource lightweight HTML5 Video Player using Javascript (No jQuery).

cPlayer : A beautiful and clean WEB Music Player by HTML5

cPlayer : A beautiful and clean WEB Music Player by HTML5

cPlayer is a beautiful and clean WEB Music Player by HTML5.

Features:

  • Lyrics display
  • Playlists
  • Three play modes, Single cycle, list loop, random play
  • Designed for touch devices
  • Modular Customizable
  • Media Session Support

SpriteJS : A lightweight 2D Render Object Model

SpriteJS : A lightweight 2D Render Object Model

SpriteJS is a lightweight 2D canvas rendering engine for modern browsers. Manipulate the sprites in canvas as you do with the DOM elements.

SpriteJS can be used with D3.js, Proton and Matter-js.

Features:

  • Manipulate the sprites element as you do with the DOM elements.
  • Perform fast drawing with smart cache.
  • Multiple layers.
  • Web Animations Api
  • Controllable event dispatching.
  • Object Oriented Programmed Development with ES6+
  • Server-side render. Work with node-canvas.
  • Weixin Apps

Integrated-2D : Javascript 2D rendering framework for SVG & Canvas

Integrated-2D : Javascript 2D rendering framework for SVG & Canvas

Integrated-2D – is an Open source Javascript framework for rendering 2D graphics on SVG, Canvas and WebGL contexts. I2D’s simple syntax and semantics lets you combine the power of Vector graphics and Bitmap to achieve complex visualisations easily.

I2Djs provides single Application Programming Interface to create and animate elements across different graphic rendering contexts by leveraging their underlying capabilities. Developers can make use of I2D’s multi-layered contextual approach with capabilities from more than one context seamlessly for creating powerful composite visualisation under a single roof.

I2D also provides a unique data-driven approach with join-actions for DOM manipulation based on data binding.

Hilo : HTML5 Game Framework

Hilo : HTML5 Game Framework

Hilo is a Cross-end HTML5 Game development solution developed by Alibaba Group. It could help developers build HTML5 games conveniently in minutes.

Features:

  • independency modules design, support multiple module styles;
  • Object Oriented Programmed Development;
  • Simple and efficient Visual Object Architecture;
  • Multiple render model supported, including CanvasRendererDOMRenderer and WebGLRenderer;
  • Compatible for multiple desktop and mobile browsers. Using Flash Shim to support IE (yes as you can see, it support IE);
  • Physics extensions supported: Chipmunk
  • Skeleton animation extensions supported: DragonBones

BLOB – Interactive Animated 3D Background

BLOB - Interactive Animated 3D Background

BLOB is animated, interactive and highly customizable 3D background. Visual editor included. Supports morphing and other shape transitions. Created as Javascript plugin based on HTML5 Canvas.

Features:

  • Interactive 3D background
  • HTML5 Canvas technology
  • Does not require WebGL support
  • All browsers and platforms
  • Works both online and offline
  • Multiple instance support
  • Three animation concepts that can be combined
  • Responds to mouse movements
  • Easy to use
  • Highly customizable
  • Rich API
  • Visual editor

Canvallax.js : Easy Parallax Effects on Canvas

Canvallax.js : Easy Parallax Effects on Canvas

Canvallax is a small (5.8kb minified, 2.1kb gzipped) dependency-free Javascript library for managing elements on <canvas>. Support is built-in for:

  • Parallax Scrolling, with optional damping to smooth motions
  • Pointer Tracking
  • Distance/scaling
  • Images on Canvas, from URLs or nodes (<img /><canvas />, etc) with Canvallax.Image
  • Common shapes (Canvallax.CircleCanvallax.Polygon and Canvallax.Rectangle)
  • Element stacking with zIndex
  • Fixed position Elements
  • Element cloning

Bu.js : JavaScript 2D Canvas Graphics library

Bu.js : JavaScript 2D Canvas Graphics library

Bu.js is a JavaScript 2D graphics library based on HTML5 Canvas.

Apexcharts.js : Interactive Charts library with JavaScript & SVG

Apexcharts.js : Interactive Charts library with JavaScript & SVG

Apexcharts.js is a modern JavaScript charting library to build interactive charts and visualizations with simple API.

Features:

  • Annotations
  • Mixed Charts
  • Heatmaps
  • Sparklines
  • Gauges
  • Dynamic Data Updation