Best jQuery HTML5 Plugins & Tutorials with Demo

    Vidbg.js : HTML5 jQuery Video Background plugin

    Vidbg.js : HTML5 jQuery Video Background plugin

    Vidbg.js is a html5 jQuery video background plugin.When resizing is set to true (default) the video will resize automatically when the window is expanded or compressed.

    • All modern web browsers
    • IE9+
    • Video will play on desktops and laptops and will resort to the fallback image (poster) on mobile devices (tablets, phones, etc.)

    chatSocketAchex : jQuery Chat Plugin

    chatSocketAchex : jQuery Chat Plugin

    chatSocketAchex is a jQuery chat plugin with 100% HTML5 – websocket ( realtime ).
    1)  Based multi-user chat client
    2)  Chatting Easy to configure
    3) Easy to run (only html)
    4) html5 – websocket

    Lollipop : HTML5 Image Editor App

    Lollipop : HTML5 Image Editor App

    Lollipop is the perfect image editing HTML5 app for quick and straight forward editing.

    Features:

    • 90+ FILTERS16 Filters + 7 Guest Filters (Instagram) from filters section, and 70+ filters from package section. Lollipop’s filters are shown real-time while you take a photo with your webcam. Move to next or previous filter by swiping.
    • 15 ADJUSTMENT & CROPPING & TRANSFORMING TOOLS & UNIQUE FRAMES Use adjustment tools: Brightness, Contrast, Saturation, Noise, Sharpen, Blur, Circle Blur, Vignette, Effects, Customize RGB… to enhance your images to perfection with ease. Transform your photos with rotating and flipping tools. Crop your photos with quick and easy cropping tool…

    Ajax Navigation : jQuery Plugin

    Ajax Navigation : jQuery Plugin

    Ajax.Navigation allows you to enhance your website by loading and inserting new content into certain areas dynamically.

    WebCola : Javascript Constraint-Based Graph Layout

    WebCola : Javascript Constraint-Based Graph Layout

    WebCola is an open-source JavaScript library for arranging your HTML5 documents and diagrams using constraint-based optimization techniques. It works well with libraries like D3.js and svg.js

    Circular HTML5 Preloader

    Circular HTML5 Preloader

    A clever preload will make the difference between an ordinary user experience and a smooth ride into your content. Enhance your project with Circular HTML5 Preloader. It’s completely rendered and animated in SVG with a small footprint.

    • 3 Different Draw Methods
    • Smooth SVG Animations
    • Autoload function
    • Optional Percentage
    • Cache busting
    • Over 30 Options
    • Customizable CSS3 Transitions
    • SVG Glow Filter Effect
    • Javascript Callbacks

    Fullscreen Video Opening Animation with CSS3

    Fullscreen Video Opening Animation with CSS3

    In this in-depth tutorial we want to show you how to create a similar video opening effect to the one seen on momentsapp.com. If you click the “Watch the video” button on the Moments App page, you will see a new image appearing on the photo stack which contains a video. The animation is a slight rotation of the frame and a subtle scaling of the video, which already starts to play. The whole wrapper expands to full screen without any play controls; just the closing cross will be shown. Once the video ends, or, if the user clicks on the closing cross, the video will simply disappear.

    Lines.js : Beautiful Diagonal Background Lines

    Lines.js : Beautiful Diagonal Background Lines

    Lines.js is a javascript library to make beautiful diagonal background line.

    Html5tooltips.js : Tooltips with smooth 3D animation

    Html5tooltips.js : Tooltips with smooth 3D animation

    Tooltips  written in pure JavaScript, with smooth 3D animation implemented in CSS. No framework dependencies.

    Vega: A Visualization Grammar

    Vega: A Visualization Grammar

    Vega is a visualization grammar, a declarative format for creating and saving interactive visualization designs. With Vega you can describe data visualizations in a JSON format, and generate interactive views using either HTML5 Canvas or SVG.