Share eight amazing HTML5 Canvas animation Effects

HTML5 can indeed produce very brilliant web page animation effects, especially by leveraging HTML5 Canvas and HTML5 3D features, we can enjoy cool animation effects. Today, I have compiled eight amazing HTML5 Canvas animation tutorials from the html5tricks website. Let's take a look.

1. 3D HTML5 Logo animation HTML5 multi-angle 3D Rotation Animation

HTML5 3D animation is very convenient to implement. We have previously introduced that the jQuery-based 3D Rotation plug-in is implemented by playing multiple multi-view images, the HTML5 3D Rotation animation shared today is implemented using pure HTML5 technology, which achieves the HTML5 Logo rotation effect.

Download demo source code online

2. HTML5 Flappy Bird games only support 65 lines of Javascript code

I believe everyone is familiar with Flappy Bird, one of the most popular mobile games in 2014. Flappy Bird is an independent game developer from Hanoi, Vietnam. It is a simple but difficult casual game that is easily addictive. Today, we use HTML5 to rewrite this Flappy Bird game. It is worth noting that using the Phaser framework, we only need 65 lines of Javascript code to implement the HTML5 Flappy Bird game.Press space key to control birdsTry it.

Download demo source code online

3. HTML5 WebGL water surface ripple effects can be displayed from multiple perspectives with ultra-lifelike

I have already shared with you a very realistic HTML5 ripple effect, and the effect is quite good. Today, I would like to share with you a more powerful HTML5 water wave animation. The screen shows a large pool, and a large stone at the bottom of the pool. You can click on the water to see the water wave, with the exposure of simulated light, the water is more vivid than the previous special effect. In addition, you can drag the stone to make it scroll at the bottom of the pool, or you can drag the screen to view the HTML5 water wave animation from multiple perspectives.

Download demo source code online

4. HTML5 cutting-fruit games HTML5 games

This is an HTML5 Fruit Cutting game provided by the Baidu JS team. I remember that this game was very popular. Today I found a HTML5-based online Fruit Cutting game. Although the function is not perfect compared with the original Fruit Cutting game, the HTML5 Fruit Cutting game is also sound and colorful, and the screen is also very gorgeous.

Download demo source code online

5. CSS3 floating belt menu awesome 3D CSS3 menu

We have previously shared many beautiful CSS3 menus, CSS3/jQuery creative box animation menus, CSS3 vertical menus, stereo animation visual menus, and CSS3 multi-level drop-down menus to expand the drop-down menu elastically. The CSS3 menu to be shared today is very special. The menu is float. When you move your mouse over the menu item, the menu item is highlighted and displayed in a very three-dimensional way.

Download demo source code online

6. HTML5 skydiving games

Today I will share an interesting HTML5 game, HTML5 skydiving game, which is a very good HTML5 casual game and mainly applies the HTML5 gravity sensing effect. The game has a total of four players, mainly compared to who landed on the ground first, when the green signal light, press the "X" key to start landing, and then press the "X" key to open the parachute for safe landing, you need to control a good time to press the "X" key and the opponent who first landed safely. You can also download the source code below to learn and share it.

Download demo source code online

7. HTML5 Video player the Video. Js player can be customized.

In the past, we used flash to make video players. Now HTML5 has gradually developed. We can also use HTML5 to make video players. Today we will introduce you to an HTML5 player Video. Js. You can change the HTML5 Video player to define its own appearance, including the overall color and playback button customization. In general, Video. Js is a very good Video player.

Download demo source code online

8. HTML5 leaf falling animation HTML5 animation classic

We previously shared several classic HTML5 animations: HTML5 love confession animation, HTML5 video fragment and reorganization effects, and HTML5 pixel crushing image animation. Today I will share an HTML5 leaf falling animation. This HTML5 leaf falling animation is based on the webkit kernel. Therefore, we need a webkit kernel browser to play the animation. The effect is really cool.

Download demo source code online

The above are eight amazing HTML5 Canvas animation effects.

This article is collected and organized by html5tricks. Make sure to keep the original article link for reprinting.
Http://www.html5tricks.com/8-html5-canvas-animation.html