Best jQuery HTML5 Plugins & Tutorials with Demo

    Responsive Gridfolio : JavaScript Html5 Responsive Layout

    Responsive Gridfolio : JavaScript Html5 Responsive Layout

    The Responsive Gridfolio has a fluid / flexible / responsive layout. Basically the grid is added into a html page into a div of your chosing and it’s adapting based of that div’s width, the grid height is modified based on the thumbnails and if other elements are below the grid div they will be pushed down automatically (document flow).

    The Responsive Gridfolio is using the GPU (hardware acceleration) using HTML5 standards. The rendering speed and performance is impeccable on desktop computers and most importantly on mobile devices, the way it works it will try to use CSS3 and if this is not available it will down fall to CSS2 or CSS1 for older browsers like IE7 and IE8.

    Sketch.js : JavaScript Creative Coding Framework

    Sketch.js : JavaScript Creative Coding Framework

    Sketch.js handles all that tedious but necessary stuff that would normally slow you down – setting up an animation loop, creating and managing a graphics context for Canvas or WebGL, cross browser and device event binding and normalisation for mouse, touch and keyboard events, handling window resizes… You get the idea.

    Layer Styles : HTML5 app for creating CSS3 in a intuitive way

    Layer Styles : HTML5 app for creating CSS3 in a intuitive way

    Just like you favorite graphic editor – but in your browser. And it creates CSS.A HTML5 app for creating CSS3 in a intuitive way.

    • Colorpicker can pick any color of the element your working on
    • Drag and Drop images onto the page to use them as a background or to pick their colors
    • Color Swatches, Gradients and Styles are locally stored

    Make your animated gifs in the browser with jQuery & Html5 : MOTHEREFFINGANIMATEDGIF

    Make your animated gifs in the browser with jQuery & Html5 : MOTHEREFFINGANIMATEDGIF

    This plugin helps in make your animated gifs in the browser.This is an H5BP community project. H5BP is where you’ll find a bunch of people creating open source software.

    LiteToolTip.js : jQuery Fully Responsive Tooltip Bundle

    LiteToolTip.js : jQuery Fully Responsive Tooltip Bundle

    The First Fully Responsive ToolTip Bundle with 12 Positions, Customizable Color Presets Menu Templates, Image Maps, Hotspots, Videos and Triggers.It’s a lightweight JQuery tooltip plugin that supports 12 positions, multiple background shades, videos, image map areas, image hotspots and menus with responsive appearance on the web pages.

    This plugin uses the HTML5 data-api instead of using default attributes so that the page code passes the W3C’s HTML and CSS validation successfully incase you want to show HTML formatted tooltips.

    Make a Web App with Instagram-like Filters in jQuery & CamanJS

    Make a Web App with Instagram-like Filters in jQuery & CamanJS

    In this tutorial, we are going to make a simple web app that allows you to drag a photo from your computer into the browser window, and apply instagram-like filters on it. For this purpose we are going to use a number of JavaScript libraries and plugins:

    • Caman.js – this is a powerful canvas manipulation library that allows you to apply various effects and filters on an image. It comes with 18 preset filters which we will be using in this example (you can create more if you wish);
    • Filereader.js – this is a lightweight wrapper around the HTML5 drag/drop events that makes them much easier to work with. It also adds a method to jQuery, so you can bind the events to a specific element;
    • jQuery Mousewheel – I am using this plugin to scroll the filter container;
    • In addition, we are using the latest version jQuery at the time of writing.

    cgSceneGraph : JavaScript & HTML5 Powerful, cross-platform Animation framework

    cgSceneGraph : JavaScript & HTML5 Powerful, cross-platform Animation framework

    The cgSceneGraph is a powerful, cross-platform and very easy-to-use animation framework written in JavaScript for the <canvas> tag in HTML5.It’s full object oriented to ease the development of your applications and games.

    The power of the framework is inside its concept : the framework itself does not render anything, and provides a lot of cool and useful features. It was designed to be extended : you can use or create an infinite number of extensions of the node class (CGSGNode) to be rendered. You are not, and won’t never be, limited to what the framework provides by itself because it is designed to be extended !

    blueimp jQuery File Upload

    blueimp jQuery File Upload

    File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

    howler.js : Modern Html5 Web Audio Javascript Library

    howler.js : Modern Html5 Web Audio Javascript Library

    Howler.js is a JavaScript library that works with Web Audio API by default and falls back to HTML5 Audio when not supported.

    Features:

    • Defaults to Web Audio API
    • Falls back to HTML5 Audio
    • Supports multiple file formats to support all browsers
    • Automatic caching for Web Audio API
    • Implements cache pool for HTML5 Audio
    • Per-sound and global mute/unmute and volume control
    • Playback of multiple sounds at the same time
    • Easy sound sprite definition and playback
    • Fade in/out sounds
    • Methods can be chained
    • Uses no outside libraries, just pure Javascript
    • Lightweight, 7kb filesize (2kb gzipped)

    jQuery Push-state Navigation plugin

    jQuery Push-state Navigation plugin

    Enable the new push-state navigation in your web site.This plugin enables the new html5 history API on your web site.