Best jQuery HTML5 Plugins & Tutorials with Demo

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

Instacam : jQuery Instant Canvas Video Plugin

Instacam : jQuery Instant Canvas Video Plugin

Instacam is a jQuery plugin to perform instant canvas video through the WebRTC API with a fresh touch of CSS filters.The plugin is compatible with browser that natively support the HTML5 canvas tag, requestAnimationFrame API, HTMLMediaElement API, navigator.mediaDevicesand Promises API. The CSS filtering requires the CSS filter features to properly work.

AlphaTab : Music notation & Guitar Tablature rendering Library

AlphaTab : Music notation & Guitar Tablature rendering Library

AlphaTab is a cross platform music notation and guitar tablature rendering library.

You can use alphaTab within your own website or application to load and display music sheets from data sources like Guitar Pro or the built in markup language named alphaTex.

Features:

  • load GuitarPro 3-5, GuitarPro 6, AlphaTex or MusicXML (experimental)
  • render as SVG, HTML5 canvas, GDI+,…
  • adapt to your responsive design by dynamic resizing
  • play the music sheet via HTML5 Web Audio API and Flash

Impact : HTML5 Canvas & JavaScript Game Engine

Impact : HTML5 Canvas & JavaScript Game Engine

Impact is a JavaScript Game Engine that allows you to develop stunning HTML5 Games for desktop and mobile browsers.

Bubbly-bg : Beautiful Bubbly backgrounds with JS & Canvas

Bubbly-bg : Beautiful Bubbly backgrounds with JS & Canvas

Bubbly-bg is a beautiful bubbly backgrounds in less than 1kB (750 bytes gzipped).

Bubbly creates a canvas element and appends it to the body. This element has position: fixed and z-index: -1, and always fills the width/height of the viewport, which should make it plug and play for most projects.

Creative Upload Interaction with JavaScript & Canvas

Creative Upload Interaction with JavaScript & Canvas

Well in this tutorial we will see how to implement a creative component to upload files, using as inspiration the previous animation by Jakub Antalík. The Idea is to bring better visual feedback around what happens with the file after is dropped.

We will be focusing only on implementing the drag and drop interactions and some animations, without actually implementing all the necessary logic to actually upload the files to the server and use the component in production.

Tower Building Game with Html5 Canvas & Javascript

Tower Building Game with Html5 Canvas & Javascript

Tower Game is a HTML5 canvas tower building game using javascript. MIT licensed and has some option to customize.