Best jQuery HTML5 Plugins & Tutorials with Demo

Zdog : A Pseudo-3D Engine for Canvas and SVG

Zdog : A Pseudo-3D Engine for Canvas and SVG

Zdog is a 3D JavaScript engine for <canvas> and SVG. With Zdog, you can design and render simple 3D models on the Web. Zdog is a pseudo-3D engine. Its geometries exist in 3D space, but are rendered as flat shapes.

Zdog uses the same principle. It renders all shapes using the 2D drawing APIs in either <canvas> or <svg>. Spheres are actually dots. Toruses are actually circles. Capsules are actually thick lines. It’s a simple, but effective trick. The underlying 3D math comes from Rotating 3D Shapes by Peter Collingridge.

ArtPlayer : Modern HTML5 Video Player

ArtPlayer : Modern HTML5 Video Player

Artplayer.js is a modern and full featured HTML5 video player.

  • Support vtt and srt subtitles
  • Support video quality switching
  • Support for custom controllayercontextmenusetting
  • Support playback rateaspect ratioflipwindow fullscreen or web fullscreen adjustment
  • Support integration with other dependencies, like: flv.jshls.jsdash.jsshaka-playerwebtorrent
  • Support chrome native picture-in-picture mode, or custom picture-in-picture mode
  • Support thumbnails and highlight in the progress bar
  • Support to maintain the original video ratio, adaptive size
  • Support rich custom event monitoring, easy to expand
  • Support for internationalization of controls
  • Support for custom plugins
  • Support local video preview
  • Support subtitle time offset

melonJS : A fresh & lightweight HTML5 Game Engine

melonJS : A fresh & lightweight HTML5 Game Engine

melonJS is an open source HTML5 game engine that empowers developers and designers to focus on content.The framework provides a collection of composable entities and support for a number of third-party tools.

Features:
  • A fresh & lightweight 2D sprite-based engine
  • Standalone library (does not rely on anything else, except a HTML5 capable browser)
  • Compatible with most major browsers (Chrome, Safari, Firefox, Opera, IE) and mobile devices
  • Device motion & accelerometer support
  • High DPI & auto scaling
  • Multi-channel HTML5 audio support and Web Audio on supported devices
  • Lightweight physics implementation to ensure low cpu requirements
  • Polygon (SAT) based collision algorithm for accurate detection and response
  • Fast Broad-phase collision detection using spatial partitioning
  • 3rd party tools support for physic body definition (PhysicEditor, Physic Body Editor)
  • Advanced math API for Vector and Matrix
  • Tween Effects
  • Transition effects

Ambient Canvas Backgrounds with HTML5 Canvas API

Ambient Canvas Backgrounds with HTML5 Canvas API

Today we’ll be exploring some ambient webpage background animations. The idea here was to create a collection of animations that are interesting to look at without being (too) distractive, and could be easily applied to the background of a webpage. Each animation is created using vanilla (es6+) JavaScript with the Canvas API.

Luna Multi Step Form with Javascript & PHP

Luna Multi Step Form with Javascript & PHP

Luna is a multiple steps form wizard for your potential customers and a HTML5 & CSS3 template. You can create reservation, questionarre or service form wizard easily, You can collect data from your customer with this amazing form wizard.

Features:

  • Responsive Design
  • Bootstrap Included
  • Material Design
  • Valid HTML5 & CSS3
  • Color & Image Options
  • Amazing Effects
  • Google Web Fonts integrated

GrapesJS : Open-source Web Builder Framework

GrapesJS : Open-source Web Builder Framework

GrapesJS is a free and open source Web Builder Framework which helps building HTML templates, faster and easily, to be delivered in sites, newsletters or mobile apps. Mainly, GrapesJS was designed to be used inside a CMS to speed up the creation of dynamic templates.

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