7 Top HTML5 Canvas animations

HTML5 is really a new technology to reform the browser and the entire software industry, it can help our web developers to easily implement animated effects on the Web page without the need for bloated flash support. This article shares 7 top-of-the-HTML5 Canvas animations, all with very good results.

1, 3D HTML5 logo animation HTML5 multi-View 3D rotation animation

HTML5 3D Animation is very convenient to implement, previously introduced the 3D rotation plug-in based on jquery is the use of multi-view picture playback to achieve, and today share this HTML5 3D rotation animation is the use of pure HTML5 technology, the animation to achieve the HTML5 logo rotation effect.

Online Demo

SOURCE download

2, HTML5 version Flappy Bird game only 65 lines of JavaScript code

Flappy Bird believes everyone is familiar with one of the hottest mobile games of the 2014. Flappy Bird is a game developed by a indie game developer from Hanoi, Vietnam, and is easy to get addicted to in the form of simple but extremely difficult casual games. Today we use HTML5 to rewrite this Flappy Bird game, it is worth noting that the Phaser framework, only 65 lines of JavaScript code to achieve HTML5 version of Flappy Bird game. Press SPACEBAR to control the bird, try it.

Online Demo

SOURCE download

3, HTML5 WebGL water wave effect can be multi-view display ultra-realistic

Before you have shared a very realistic HTML5 rippling effects, the effect is good. Today again to share a more powerful HTML5 water animation, the screen is a large pool, the bottom of the pool is a large stone, on the water can be hit on the surface waves, coupled with simulated light exposure, water waves than on a special effect more vivid and lifelike. Alternatively, you can drag the stone to let it scroll at the bottom of the pool, or you can drag the screen to view the HTML5 water Wave animation.

Online Demo

SOURCE download

4, HTML5 version cut fruit game HTML5 game Acura

This is a Baidu JS group provided by the HTML5 version cut fruit game, remember to cut fruit game was very fire, today I found a web-based HTML5 implementation of cutting fruit game. Although compared with the original cut fruit game function is not perfect, but the HTML5 cut fruit game is also a vivid, the picture is very gorgeous.

Online Demo

SOURCE download

5. CSS3 Ribbon Menu Super Cool 3D CSS3 Menu

Before we shared a lot of beautiful CSS3 menu, css3/jquery Creative Box Animation menu, CSS3 vertical Menu menu has stereoscopic animation vision, CSS3 Multi-level pull-down menu elastic expansion under the pull of the picture. Today to share the CSS3 menu is very special, the menu is a ribbon-shaped, the mouse over the menu item, the menu item will be highlighted, the performance of the very three-dimensional dynamic.

Online Demo

SOURCE download

6, HTML5 skydiving game to see who first safe landing ground

Today I will share a fun HTML5 game, HTML5 skydiving game, is a very good HTML5 casual games, the main application of the HTML5 of gravity induction effect. Game altogether four players, mainly than who first safe landing ground, green lights, press the "X" key to start landing, and then press the "X" key to open the parachute for safe landing, you need to control the time to press the "X" key and opponents who first safe landing. You can also download the source code below to learn how to share.

Online Demo

SOURCE download

7, HTML5 video player Video.js player appearance can be customized

We used to use Flash to make video player, now HTML5 gradually developed, we can also use HTML5 to make the player. Today to introduce a HTML5 player video.js, change HTML5 video player can define their own appearance, including the overall color, play button customization and other functions. Overall, Video.js is a great video player.

Online Demo

SOURCE download

This article fixed link: http://www.i7758.com/archives/2241.html

7 Top HTML5 Canvas animations