HTML5 is one of the hottest technologies available and developers seem to take great advantage of the features included in the new HTML version. However, many of you don't actually know why HTML5 is so cool and what possibilities are opened thanks to this new language. That's why I've collected some of the most impressive HTML5 animations that I've encountered and listed them bellow.
Keep in mind that HTML5 is still under heavy development and the final version will bring way more surprises. Looking at these examples just makes me wonder if Flash will be able to keep up with HTML5 in the years to come. Also make sure you use Firefox or Chrome when viewing these animations because they are the most reliable when it comes to HTML5.
Hello Racer Animation
One of my favorite animations because it renders the monopost car so beautifully. On top of that, the user has control of the car at all time.
Running Man in 3D
A pretty creative sci-fi scene in which a man runs and is chased by a giant hand. The animation was created in 3D and it rotates based on the position of your mouse cursor.
3D Bricks
This is a small game created based on the more popular Rapanui. However, this time we have a more futuristic look as well as astonishing 3D elements all over.
Cubes
It is quite great to rotate your mouse and view 3D cubes all over the place. 3D cubes does exactly this offering you a one of a kind view.
HTML5 Human Face
Is incredible how realistic this can be. The animation allows you to rotate it in 3D and is 100% made HTML5 canvas.
Type on Water
This is a creation of MrDoob, a very talented web programmer who is specialized in JS and HTML5. This animation helps you create interactive text with the water texture all over it.
Knight
A very nice looking 3D animation impersonating a brave knight with a sword. The animation was created by apendua at ThreeJS
Voxels
This one reminds me a lot of the more popular game called Minecraft where you can build all sorts of things based on cubic elements.
Radiohead 3D
A creative red face spinning with an amazing 3D effect. The design was created based on House Of Cards.
Torus
I am sure you are familiar with the widely popular game Tetris. Torus is a 3D version of Tetris, but here you have to build blocks based in a circle, making things way more interesting.
Lamborghini Animation
If you are a fan of sport cars, then I am sure you will love this animation. Besides that, you can also create a competition between the two cars using the arrow keys.
Cubic
Each time you click in the cubic area, you generate new volleyballs. This is an interesting animation and it makes use of great 3D elements.
HTML5 Dinosaur
A spinning 3D canvas dinosaur created by the guys at Zynaps
Galactic
One of the most impressive Microsoft benchmarks created for HTML5 projects. It features the planets of the Solar system spinning on a majestuos background sound.
Liquid Voxels
Are you a fan of Lego designs? If you are, then you will most definitely enjoy this 3D voxel animation.
3D Spinning Ball
A collection of multiple 3D elements spinning when you click them.
Internet Explorer Logo
Even though Internet Explorer isn't the best HTML5 renderer out there, it's logo seems to mean a lot for the developers. The animation is pretty cool and smooth.
Rome
A project supported by the Google Chrome team. The project has a cool introduction animation based on skies and a nature elements and birds flying in the sky.
Morphing Cubes
Cube in cube in cube! A great animation which rotates in 3D mode.
Spinning Globe
Yet another cool animation with Terra spinning gloriously around it's axe.
HTML5 Icon
After Internet Explorer logo spinning, is time for the king HTML5 to spin gloriously.
Tunneler
Whenever you click on the screen it generates a colorful fractal. It follows your cursor and generates nice drawings.
Asteroid Belt
Yet another cool asteroid animation created in HTML5, but this time is a more interactive one because when you click on the asteroid, it grows and comes towards you.
Twirl Sphere
A circle which moves randomly on a picture which gets twisting effect.
Canvas 3D
A one of a kind 3D photo gallery spinning. You can click on each square to reveal a new photo.
FishBowl
A project started by Microsoft to test the HTML5 rendering performance.
DNA Model
A biology friendly animation which features the structure of DNA. You have 6 different schemes to choose from.
Walking
The walking man, Andrew Hoyer was created using simple HTML and CSS3 animations. It looks amazing and it is a step forward toward natural movements in CSS3 and HTML5
World Population
It features the world population in different colors based on their density and the number of people. Just click start demo to see this cool Chrome Experiment.
3D Cloth Simulation
A waving cloth created in HTML5. It is build using canvas and a simple image stylized by CSS.
Google Images 3D Box
The popular image search from google now available in a tiny moving box. It looks pretty cool and it uses the Google algorithm to search for images.
Geometric Universe
Multiple geometric shapes floating around like they are a part of a galaxy. They are colorful and fun and you can
3D Assembly
They give you the 3D structure of a tank and a plane and you have to build it by yourself. All in one is a pretty cool animation!
Cubeout
Yet another Tetris like game created in 3D. It is based on multiple colors so when you build bigger blocks, you get darker colors. All in one, is a pretty interesting HTML5 application to check out.
HTML5 Landscape
A pretty nice landscape loop exploring new territory.
Particle Sphere
Looks like a discoball, but is actually a pretty nice HTML5 animation.
Zoetrope
A new type of HTML5 animation based on a vintage film / cinema style.
CanvasMol
It showcases 3D molecules of most popular and not so popular chemical elements in the periodic table and some chemical combinations too.
Coca Cola Can Moving
When you scroll to right the Coca-Cola can moves. This animation was created entirely using CSS3 elements.
CSS Book
A nice looking flexible CSS book in 3D. The actual animation was created in CSS3.
3D Clock
Another great experiment from Andrew Hoyer. This time we talk about a classic clock which can tilt can roatate based on your preference. The clock works best on Google Chrome.
Cursor Monster
A simple and funny monster animation which follows your cursor. Based on the position of your cursor, the monster is happy or sad.
Clouds
Just clouds coming towards you. However, the animation is pretty smooth making you think that you are actually in the clouds.
Asteroids
It started as a benchmark test for all the common operations in HTML5, but it became a pretty interesting 3D animation.
3D City
A project brought by Cubiq. It shows a 3D spinning city in a continuous loop, is pretty cool.
Bouncing Ball
A project created in CSS3 animation at Tympanus. If you click and hold on it, the ball will jump away and come back.
3D Collection
A nice collection of 3D elements created with HTML5 and CSS3 by ThreeJS.
Mechanical Engineering
In this animation you have loads of 3D elements assembling in real time. Is a fascinating animation that will make you go wow for sure.
Canvascape
Canvascape is a project meant to reproduce the popular Counter-Strike game in HTML5. However, don't think that you have all the features available because is just a demo.
Spinning 3D Cube
Just a simple classic, spinning cube with 6 faces showing text and texture elements on each face.
3D Earth
This one reminds me of Google Earth animation, but this time is just a preview and it is created using HTML5 canvases.
FPS Engine
An graphic engine created to test the power of gaming development in HTML5 and CSS3. After seeing this, I believe there is great potential behind this technology.
Cloth Simulation
Yet another cloth simulation created by Andrew Hoyer, but this time there's no texture involved just paths that are flexible and easy to move with one click and drag.
courtesy: http://vivastart.com/html5-animations/
0 comments:
Post a Comment