A selection of 9 HTML5 effects worth Learning

A cool set of HTML5 effects is featured here. HTML5 is a hot spot in Web development, with many new features that have been long awaited, especially on the mobile side, where Web developers can easily create interactive, rich Web applications with HTML5 power.

Super bright 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 little while, it is no harm:)

SOURCE Download Online Demo

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.

SOURCE Download Online Demo

SVG for a nice 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.

SOURCE Download Online Demo

Combining CSS3 & Canvas to simulate the effects of people walking

HTML5 and CSS3 technology have brought new tools to the Web, igniting the passion of Web developers. The so-called only unexpected, did not do, it is true. Let's share a CSS3 & Canvas simulation of human walking animation.

SOURCE Download Online Demo

HTML5 high-fidelity 3D fabric pattern effect

HTML5 specification introduces many new features, one of the most anticipated is the canvas element, HTML5 Canvas provides a way to draw graphics through JavaScript , very powerful. Let's share a HTML5 Canvas-drawn 3D cloth pattern effect.

SOURCE Download Online Demo

HTML5 simulating realistic physical effects

Ball Pool is an experiment based on HTML5 technology that simulates real-world physical effects and lets you feel the movement of natural objects in the Web . Play Introduction: You can drag the ball, click the page background, shaking the browser, double-click the page background or hold the left mouse button, there are different effects, hurry to experience.

SOURCE Download Online Demo

HTML5 WebGL for realistic cloud effects

Use HTML5 WebGL for ultra-realistic cloud effects. WebGL is a technology that renders 3D images in a Web browser, as opposed to the need to install a browser plugin in the past, and with WebGL technology, you only need to write a Web page code to visualize the 3D image.

SOURCE Download Online Demo

HTML5 Making Crazy Tentacles

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

SOURCE Download Online Demo

The experiment of water surface effects achieved by WebGL

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.

SOURCE Download Online Demo

A selection of 9 HTML5 effects worth Learning