10 web front-end worthy of learning HTML5 effect attached source

1.jQuery Right Tab TAB's focus graph plug-in

This is a jquery-based focus map plug-in, similar to the previously described jquery Focus diagram plug-in, which toggles the picture in a fade-out animation, the focus graph plugin features a row of tab tabs on the right, and click on the corresponding tab to toggle the corresponding picture. It should be said that this jquery Focus map plugin is very useful.

Online Demo

SOURCE download

2. Super-dazzle HTML5 particle effect progress bar

I like the effects of particle works, especially those that can be applied to the actual, such as the progress bar written by Jack Rugile based on HTML5 Cavnas. Look at such a dazzling Loading effect, even let me wait for a while, no harm:

Online Demo

SOURCE download

3.HTML5 Canvas simulates ripped fabric effect

This is a HTML5 Canvas application demo that mimics the effect of a ripped cloth, with realistic results. You'll see that with Canvas's powerful drawing and animation capabilities, you can take your breath away with minimal code.

Online Demo

SOURCE download

4.SVG to achieve a beautiful page preload effect

Shows how to use CSS animations, SVG and JavaScript to create a simple page preload effect. For websites, these pre-loaded images provide a creative way to keep users from getting bored while waiting for content to load.

Online Demo

SOURCE download

5.HTML5 Making Crazy Tentacles

This example is called crazy tentacle, moving the mouse can be doodle, click the mouse can clear the canvas.

Online Demo

SOURCE download

Water surface effect Experiment of 6.WebGL realization

Using WebGL to achieve the water effect experiment, you can put in a photo, using the mouse to touch the water will have a strange effect.

Online Demo

SOURCE download

7. Building circular navigation using CSS3 Transforms

In this tutorial I'll show you how to use CSS transformations to create circular navigation. The tutorial explains that implementing this style will involve some basic mathematical knowledge and create these styles with CSS transformations. But don't worry, the mathematical knowledge used here is really simple. The tutorial uses easy-to-understand language to introduce mathematical logic so that you can clearly understand the technology behind it.

Online Demo

SOURCE download

8.Popline: Handsome floating HTML5 Text Editor toolbar

Popline is a rich Text Editor toolbar based on the HTML5 implementation, which is inspired by the Popclip, and is easy to operate, compared to the traditional text editor tools, where popline can float around the edited text.

Online Demo

SOURCE download

9.S gallery– very distinctive responsive JQuery album plugin

S-Gallery is a responsive jQuery photo album plugin. The HTML5 full-screen API and CSS3 animations and CSS3 transformations are used, so they can only be used in browsers that support these features. This plugin features a feature: Exit slide mode back to Grid view mode, and the last active picture will be animated back to the initial position in the grid view, so users know which image they are browsing to in the gallery.

Online Demo

SOURCE download

10.masonjs– creating the perfect masonry structure page layout

MASONJS plug-ins are used to solve most of the problems in the use of grid systems today-spacing. When using Masonry,isotope or any other grid plug-in, there are gaps or uneven edges in the layout. Masonjs can help you fill the gaps in these layouts.

Online Demo

SOURCE download

10 web front-end worthy of learning HTML5 effect attached source