Best jQuery HTML5 Plugins & Tutorials with Demo

    jsDraw2DX : SVG Graphics Library for JavaScript Html5

    jsDraw2DX : SVG Graphics Library for JavaScript Html5

    jsDraw2DX is a standalone JavaScript library for creating any type of interactive graphics with SVG (and VML for old IE browsers). Besides the ability to generate all basic shapes like line, rectangle, polygon, circle, ellipse, arc, etc., the library can draw curves, beziers (any degree), function plots, images and decorated text.

    jQuery Interactive Shopping Cart

    jQuery Interactive Shopping Cart

    This is a smart interactive Shopping Cart jQuery plugin based on Bootstrap framework.

    Features:

    • Very easy to install!
    • Full AJAX implementation code.
    • Well documented code.
    • HTML5 & Valid CSS .
    • Cross-platform.
    • Easy to customize.

    fabric.js : JavaScript Html5 Canvas Library

    fabric.js : JavaScript Html5 Canvas Library

    Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. It is also an SVG-to-canvas parser.

    Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes — rectangles, circles, ellipses, polygons, or more complex shapes consisting of hundreds or thousands of simple paths. You can then scale, move, and rotate these objects with the mouse; modify their properties — color, transparency, z-index, etc. You can also manipulate these objects altogether — grouping them with a simple mouse selection.

    Html5 and Jquery Slide LightBox

    Html5 and Jquery Slide LightBox

    I would like to show you something called the Html5 and Jquery Slide LightBox. In the internet i see a typical type of lightbox is the one jquery own lightbox so i just make new jquery lightbox that inspire you and your user who visit your portfolio basically we love to showcase our work with awesome place so this is the great jquery plugin where you can showcase your work even you can slide the work with information and even its look creative.

    Fullscreen Site Navigation with jQuery & Html5

    Fullscreen Site Navigation with jQuery & Html5

    FSN (Fullscreen Site Navigation) is a JavaScript plugin that lets to build in the easy and quick way a fullscreen website.FSN can be integrated into any cms or website template: it provides only the structure and the algorithm to make it work, the rest is on the designer hand.So you can understand that it’s very flexible and it adapts to any user requirement.

    Features:

    • Html5 structure
    • Menu system navigation
    • Keyboard navigation
    • Arrows navigation
    • Dots navigation
    • Url navigation
    • Ajax content
    • Scrollbar customization
    • Adaptive layout
    • Configuration file
    • IE6 Alert
    • Background image
    • Cross Browser
    • Cross Device

    jQuery Toggle Panel

    jQuery Toggle Panel

    Toggle Panel is a lightweight jQuery plugin that helps you create toggleable content.

    Features :

    • Toggle Panel fits right into a responsive or fluid design. Fixed width is possible too.
    • With HTML5 Local Storage the state (expanded or collapsed) is saved and restored upon reentering the page.
    • HTML5 audio and video elements inside a toggle panel are automatically paused when it is collapsed.
    • Smooth and beautiful CSS3 transitions bring Toggle Panel to life.
    • Load content via AJAX

    Filter Slider : jQuery Image Manipulation

    Filter Slider : jQuery Image Manipulation

    The main goal of FilterSlider is to manipulate images and HTML content using canvas, jQuery library and Javascript.It uses advanced techniques to produce some of the popular effects like grayscale, sepia and saturation along with 13 other useful effects.These effects work on all major browsers that support the ‘canvas’ element.

    features:

    • Responsive layout
    • 16 filter effects for images and html content
    • Full width support
    • Powerfull API : init, destroy, next item, previous item, jump to item, stop auto, resume auto, action on each slide
    • Adjustable speed, transition, easing and effects for each caption or slide
    • Multiple sliders on the same page
    • Support for inline content
    • Animated blocks
    • Easily customizable via CSS file
    • Loading screen
    • Set start slide index
    • Can be easily loaded using ajax
    • Smart scale mode for images
    • 7 transition effects
    • Autoplay and stop parameters
    • Show/hide arrows and navigation
    • Randomize slides
    • Constant support and upgrades
    • Mouse wheel support

    Building Web Presentations Using jQuery Mobile

    Building Web Presentations Using jQuery Mobile
    jQuery mobile framework provides easily themeable, HTML5-based interface with support for pages transitions, therefore it would be very easy to create simple web presentations that will work on all popular smartphone and desktop platforms.

    First, check out the demo, then let’s walk through the building blocks of this sample presentation.

    Dancer.js : A high-level audio javascript API

    Dancer.js : A high-level audio javascript API

    dancer.js is a high-level audio API, usable with both Mozilla’s Audio Data API and Webkit’s Web Audio API with flash fallback, designed to make sweet visualizations.

    Features:

    • Use real-time audio waveform and frequency data and map it to any arbitrary visualization
    • Use Dancer to get audio data from any preexisting audio source
    • Leverage kick detection into your visualizations
    • Simple API to time callbacks and events to any section of a song
    • Supports Web Audio (webkit), Audio Data (mozilla) and flash fallback (v9+)
    • Extensible framework supporting plugins and custom behaviours

    xSquare : Responsive Image Slider in html5/jquery

    xSquare : Responsive Image Slider in html5/jquery

    xSquare is a responsive jQuery image slider. It has a layout that consists of grids making it useful for variety of web page positions. Though the main purpose of the image slider is within a banner position it can easily be implemented as an image gallery or something similar because it is compatible with lightbox, prettyPhoto etc. The loading of images is done via smart lazyLoad with an implemented loader. Effective sliding transitions make the slider have a more dynamic look. The xSquare responsive image slider gives you the option to place up to 7 images in one slide or to place one effectively sliced photo.