allstufftech August 13, 2017

HTML5 and CSS3 are the pairs made in heaven. With the extent and power of HTML5, animation has taken a new turn. Benefits availed out of HTML5 animations are tremendous, the main being Google friendly which the robots of search engines can index. While looking and browsing the web, I came across many web effects using Javascript libraries and HTML5 canvases, the best 5 ones of which I likes are listed below:

HTML5 Animation

1. Tunneler

Tunneler Effect

This is by far the best HTML5 canvas animation effects which is driven by user mouse clicks. Click anywhere, keep it pressed and drag your mouse, do a right-click of mouse and you will see numerous colored tunnels formed and rotated and finally disappear after a short while. See for yourself to believe.

2. Scrollorama

Scrollorama

A javascript powered animated text effect based on user’s mouse scroll. Select any letter and scroll your mouse. Even if the texts are animated still your selection remains intact signifying the importance of search engine friendliness of the text content. What are you waiting for? See to believe. A more sophisticated version is SuperScrollorama.

3. Parallax Effect

Parallax Effect

You might have used lot of layers while designing some image in Photoshop. The same layered movement concept is born in the web world. Parallax effect signifies different layers of images moving at different paces to create a nice engaging pseudo 3D effect in the 2D world. Don’t believe me, check this effect.

4. JSAnim

JSAnim Javascript Library

Tis is javascript library to help create layered animated effect in any webpage. The smooth transitions of each image and the flow makes you feel that this might be Flash animation but trust me it is not.

5. HTML5 Presentation Effect

HTML5 Presentation Effect

Ever wondered a smooth transition of your presentation in the web world which is facilitated by keyboard support and shortcuts. Now it has become a reality. See this nice presentation sample created to demonstrate the power of HTML5.