Best jQuery HTML5 Plugins & Tutorials with Demo

    Pixel Animation HTML5

    Pixel Animation HTML5

    Pixel animation is an animation script which can animate any image on any webpage. It disintegrates the specified image into pixels and then animates them as per user’s mouse interaction. There are various options that can be specified.

    Features:

    • Great attention grabber.
    • It is very easy to use.
    • No need to create animated gifs or flash. Simply upload an image and it will be animated.
    • Fast animation.
    • Animation interacts with viewer’s mouse movement.
    • Auto stop once the animation completes.
    • Animation automatically pauses when the page is not visible. For ex, when you select a different tab or minimize it..

    jQuery Online Product Customizer

    jQuery Online Product Customizer

    Online Product Customizer is a jQuery powered fully responsive online design software, incorporated with marvelous features to design/print a variety of products, including t-shirt, sign, greeting, labeling, photo frame, lettering, sticker and apparel. A plenty of remarkable features of this online product design tool enable the users to design & customize products exactly according to their needs. It can be used as online t shirt designer tool, online greeting card design software or online laptop design tool to design creative & trendy products.

    • Provides 3 ready to print or Direct to Garment output files like svg, png and pdf
    • Use flexible pricing setting to set price on any of element such as color, artwork or text
    • Option of Google fonts can be enabled in online product customizer
    • JSON format enables to update products, fonts, cliparts & more
    • Colorable Artworks to make it possible for you to set cliparts for users in order to change color
    • User can upload their own images
    • Fully responsive & flexible product design tool
    • Vendors specified products.
    • Get smooth drag, slide, rotate and flip content functionality on tablets & smartphones as this online design tool is touch enabled
    • Share your creative design on Facebook, Twitter and email.
    • Products can be adorned with multiple colors & views

    VS Builder – Pure HTML and CSS Page Builder

    VS Builder - Pure HTML and CSS Page Builder

    VS Builder – an intuitive and handy page builder. It is based on the Zurb Foundation grid and offers you a flexible way to build your personalized layout. With just one click you’ll get a generated CSS and HTML code similar to one that was written by a professional developer.

    Features:

    • Drag & Drop sliders
    • Awesome preloader
    • Parallax effect
    • Video block
    • Responsive layout
    • Retina ready
    • Smooth transition effects

    HTML5 Signature Pad to Image

    HTML5 Signature Pad to Image

    Need a customer’s signature saved to an image? This is the perfect solution! Draw, sign or touch-n-slide to add your signature and save it to an image format with transparency. It’s the perfect solution if you need a signature for legal documents, purchase invoices, contracts or other important docs.

    Easy to use Plug-n-Play app for any web browser, iPhone, iPad or iPod Touch that supports HTML5 and Canvas image export.

    Features :

    • Save signature directly to PNG
    • Customizable Color Palette
    • Pencil Sizes
    • Unlimited Undos
    • Quick Signature Clear
    • Tons of Javascript Settings

    Resizing and Cropping Images with HTML5 Canvas

    Resizing and Cropping Images with HTML5 Canvas

    In this tutorial we’re going to learn how to resize and crop an image using the HTML5 <canvas> element, and while we’re at it, let’s create some fancy controls for resizing, commonly seen in photo editing applications.

    HTML5 File Upload

    HTML5 File Upload

    This is a HTML5 file uploader, for single or multiple files. You can add files easily by dragging and dropping them or clicking. All files will be uploaded via AJAX or can be added within a form. Files can be renamed before uploading. Server files can be displayed and removed. All the files can be downloaded after they successfully uploaded.

    Features:

    • Upload single or multiple files
    • Control files with extensions or mime type
    • Edit filename before uploading
    • Easy setup
    • jQuery & Bootstrap 3.1
    • Options to make it your own
    • PHP examples included

    Wufoo style jQuery and HTML5 form builder

    Wufoo style jQuery and HTML5 form builder

    formbuilder is a Wufoo style jQuery and HTML5 form builder allows you to create user forms by dragging and dropping form elements.

    This form builder is using JSON to load existing form structures and serialising existing form structures back to JSON when the save button is clicked.

    Azexo : jQuery drag and drop HTML builder with Bootstrap

    Azexo : jQuery drag and drop HTML builder with Bootstrap

    jQuery drag and drop HTML builder – compile Bootstrap based HTML and JS. Builder extract required JS code (about 0% – 15%) from itself and provide it with resulting HTML to allow initialization a third party JS libraries on frontend. Generated HTML contain “data” attributes which store JS libraries settings and helpers to allow parse document structure by editor.

    View360 – 3D & 360 degree product viewer

    View360 - 3D & 360 degree product viewer

    By using View360 it’s easy to show any product in 3D of 360 degree rotation. It’s responsive and support all mayor devices and browsers. View360 is built for both: professional ecommerce industry and small online stores. Preloader, simple navigation, automated rotation, inertia, are only few of many options available for fine tuning the product view and behavior.

    • 3D and 360 degree rotation
    • Fixed, responsive and light box layout
    • In page, full screen and full viewport modes
    • Retina ready
    • Simple navigation for best user experience
    • Native HTML5 & JavaScript
    • Auto and manual rotation
    • Zoom and Pan
    • Auto rotation speed
    • Mousemove/touchmove sensitivity
    • Preloader text, color and size
    • Optional full sized image load on zoom
    • Auto rotation direction and speed
    • Setting concrete zoom steps

    Animated Background Headers with JavaScript & Canvas

    Animated Background Headers with JavaScript & Canvas

    Today we’d like to share some animated header backgrounds for your inspiration. The full-page background image header has been a web design trend for some time. Recently people have been turning to animation to add more visual interest to their website headers, and today we share a few examples of how you can do this.This collection uses JavaScript and Canvas to create various header animations.