10 HTML5 results worth learning on the web Front End with source code and 10 html5

10 HTML5 results worth learning on the web Front End with source code and 10 html5

1. focus chart plug-in for the Tab on the Right of jQuery

This is a jQuery-based focus chart plug-in. Similar to the jQuery focus chart plug-in introduced earlier, it switches images in an animated mode, the focus chart plug-in features a Tab on the right. Click the corresponding Tab to switch the corresponding image. It should be said that this jQuery focus chart plug-in is very practical.

Online Demo

Source code download

2. Superb HTML5 particle effect progress bar

I like Particle effect files, especially those that can be applied to reality. For example, this progress bar effect compiled by Jack Rugile Based on HTML5 Cavnas. Looking at this dazzling Loading effect, even if I wait for a while, it's Okay:

Online Demo

Source code download

3. HTML5 Canvas to simulate the effect of tearing Fabric

This is an HTML5 Canvas application demonstration that simulates the effect of torn fabric. You will see that with the powerful drawing and animation functions of Canvas, you can achieve the effect with little code.

Online Demo

Source code download

4. SVG achieves a beautiful page pre-loading effect

Demonstrate how to use CSS animation, SVG and JavaScript to create a simple page preload effect. For websites, these pre-loaded images provide a creative way, so that users are not bored while waiting for content to be loaded.

Online Demo

Source code download

5. HTML5 production is at your fingertips

In this example, you can move the mouse to graffiti and click the mouse to clear the canvas.

Online Demo

Source code download

6. Experiment on special surface effects implemented by WebGL

A special water surface effect experiment using WebGL allows you to place a picture and touch the water surface with a mouse.

Online Demo

Source code download

7. Use CSS3 Transforms to build a circular navigation

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

Online Demo

Source code download

8. Popline: handsome floating HTML5 text editor Toolbar

Popline is a rich text editor toolbar Based on HTML5. It is designed with inspiration from PopClip. Compared with traditional text editor tools, Popline can be moved around the edited text, making it easy to operate.

Online Demo

Source code download

9. S Gallery-special responsive jQuery album plug-in

S Gallery is a responsive jQuery album plug-in. HTML5 full-screen API and CSS 3 animation and CSS 3 conversion are used only in browsers that support these functions. This plug-in has a special function: exit the slide mode and return to the grid view mode. The last active image will return to the initial position in the grid view in the form of animation, therefore, the user knows which image They browsed in the gallery.

Online Demo

Source code download

10. MasonJS-create a perfect webpage layout for the Masonry Structure

The MasonJS plug-in is used to solve the problem of most grid systems currently-spacing. When Masonry, Isotope, or any other grid plug-in is used, the layout may be blank or the edges may be uneven. MasonJS can help you fill the gaps in these la S.

Online Demo

Source code download