Best jQuery HTML5 Plugins & Tutorials with Demo

    Create a Minimal Coming Soon Page using HTML5 and CSS3

    Create a Minimal Coming Soon Page using HTML5 and CSS3

    In this tutorial we are going to create a Coming Soon page using HTML5 and CSS3 with a minimalist style and light colors. We will use the minimal Coming Soon page designed in Photoshop by Stelian a few days ago. For the countdown timer we will use jQuery and the jQuery countdown plugin from tutorialzine.com. Of course we will customize it a bit to match our design.

    Interactive Particles Slideshow with Html5 & JavaScript

    Interactive Particles Slideshow with Html5 & JavaScript

    This is an experimental interactive slideshow component with math shapes and texts using Html5 Canvas. The slideshow consists of pairs of shape and text, both made out of particles that the user can interact with and that transition into the next pair when navigating. With Canvas we can dynamically draw 2D stuff using JavaScript and this experiment shows some of the possibilities.

    How to build a realtime jQuery plugin

    How to build a realtime jQuery plugin

    The jQuery realtime library is a first attempt at making it really easy for anybody to add realtime data to a web page by just adding markup to a page and using jQuery and a jQuery library.

    In this tutorial we’ll create a jQuery plugin that makes it really easy to add realtime content to a page by simply adding some markup. First, we’ll cover how to use a service called Pusher to subscribe to realtime data. Then we’ll define a way of marking up an HTML5 document with ‘data-*’ attributes in a way which can then be queried by our realtime jQuery plugin and converted to realtime data subscriptions. Finally, we’ll create the jQuery plugin which will use the attributes to subscribe to data and instantly display updates within the page.

    Simple Instagram VIDEO with jQuery & HTML5

    Simple Instagram VIDEO with jQuery & HTML5

    Simple Instagram Video is a premium Instagram plugin that uses the power of HTML5 Video to showcase the latest functionality of the Instagram API. We know you will love it as much as we do because we’ve designed it to be as beautiful as it is useful. Give it a try, have some fun, and share you moments with the world!

    Features:

    • Superior Codebase – Built on our amazingly bulletproof framework
    • Responsive Design – Fully mobile-ready design adapts to any device.
    • Fullscreen Video – Enjoy your videos fully regardless of the device.
    • Advanced Video Thumbnail Gallery Mode – Share your best Instagram videos with our clean thumbnail gallery.
    • Premium Video Playlist Gallery Mode – Display your videos with our unique playlist style video player.
    • Popular Instagram Feed Mode – This feed mode pulls in the photos from the Instagram popular feed.
    • Tag Instagram Feed Mode – This feed mode allows you to specify a tag to search from the Instagram API.
    • User Instagram Feed Mode – This feed mode allows you to specify a user id to pull in photos from a specific user.
    • Multiuser Instagram Feed Mode – This feed mode allows you to specify multiple user id’s to pull in photos from specific users. Note, this feature does NOT allow load more functionality.
    • Liked Instagram Feed Mode – Display photos and videos that you’ve liked all accross the Instagram API.

    jQuery Steps : A powerful jQuery wizard plugin

    jQuery Steps : A powerful jQuery wizard plugin

    jQuery Steps is a smart UI component which allows you to easily create wizard-like interfaces. This plugin groups content into sections for a more structured and orderly page view. Furthermore, it is as simple as 1-2-3 to add plugins such as jQuery Validation which can prevent step changing or submission. Check out the demos and get a first-hand impression!

    Features:

    • HTML5 and Accessability support
    • Async (AJAX) content loading
    • Form validation made easy
    • Embedded iframe content
    • Cool transition effects
    • Keyboard navigation
    • Simple Step Manipulation
    • Multiple wizards in one page
    • Easy Navigation
    • State Persistence *

    ZoomBox 2 – The Photographer’s Premium Lightbox in jQuery & CSS3

    ZoomBox 2 - The Photographer's Premium Lightbox in jQuery & CSS3

    ZoomBox 2 – The Photographer’s Lightbox ! What makes ZoomBox unique to the other lightbox scripts ? In short – quality, user-friendliness, design and social media connectivity. Take a look at the demos and be convinced.

    Features:

    • HTML5 technology – this gallery uses the latest html5 tehniques ( like Histroy API ) to deliver a never seen before experience to your clients
    • fully responsive – looks great from mobile to HD
    • touch optimized – touch devices are not forgotten
    • two skins – two full skins to fit every brand
    • CSS3 technology – this player uses cutting-edge css3 definitions
    • Retina-ready – graphics have double resolution for smooth retina viewing
    • easy install – purchase, download the zip, read the docs
    • iPhone / iPad optimized – this gallery has been optimized for Apple touch devices
    • Android optimized – this component has been tested on Android 4.0 and works awesome
    • truly social – Zoombox 2 is truly social. It features the Facebook Like widget and Facebook Chat so your fans can comment on your art. And because deeplinking is done right in ZoomBox 2, each photo has it’s own likes and comments, even if on the same page. Wow!

    iMapper : jQuery/HTML5/CSS3 Image Mapper

    iMapper : jQuery/HTML5/CSS3 Image Mapper

    iMapper – jQuery/HTML5/CSS3 Image Mapper is a simple, yet powerful plugin that lets you select an image of your choice and pin stuff on it. It offers several embedded pins which offer special functionality, as well as the ability to import your own pins with the basic functionality. It is very intuitive and easy to use, and it will take but moments to set up your image with pins and customize the content connected to each of these pins.

    iMapper is a perfect solution if you want to make your contact page a bit more dynamic. It will fit perfectly no matter what your profession is. It can easily be adapted to a health image mapper, product image mapper, contact image mapper etc.

    least.js : jQuery Responsive HTML 5, CSS3 Gallery with LazyLoad

    least.js : jQuery Responsive HTML 5, CSS3 Gallery with LazyLoad

    least.js is ajQuery plugin for Random & Responsive HTML 5, CSS3 Gallery with LazyLoad.

    PathJS : Simple, lightweight routing for web browsers

    PathJS : Simple, lightweight routing for web browsers

    PathJS is a lightweight, client-side routing library that allows you to create “single page” applications using Hashbangs and/or HTML5 pushState.

    Features:

    • Lightweight
    • Supports the HTML5 History API, the ‘onhashchange’ method, and graceful degredation
    • Supports root routes, rescue methods, paramaterized routes, optional route components (dynamic routes), and Aspect Oriented Programming
    • Well Tested (tests available in the ./tests directory)
    • Compatible with all major browsers (Tested on Firefox 3.6, Firefox 4.0, Firefox 5.0, Chrome 9, Opera 11, IE7, IE8, IE9)
    • Independant of all third party libraries, but plays nice with all of them

    Responsive HTML5/jQuery Sign In/Registration Form

    Responsive HTML5/jQuery Sign In/Registration Form

    Responsive HTML5 Sign In / Registration form, with jQuery effects and CSS3 customization.

    Features:

    • it is compatible with all major browsers (IE8, IE9, IE10, Chrome, Mozilla Firefox, Opera, Safari)
    • really easy to use and to integrate into your website
    • cool effects
    • html5 custom validation
    • responsive layout
    • really easy to modify (100% CSS customizable)