Tuesday, October 8, 2013

Astonishing 3D Animations Created in HTML5 and CSS3

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

hello racer1

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

running man

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

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

3d 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

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

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

knight

A very nice looking 3D animation impersonating a brave knight with a sword. The animation was created by apendua at ThreeJS


Voxels

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

radiohead 3d

A creative red face spinning with an amazing 3D effect. The design was created based on House Of Cards.


Torus

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

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

cube balls

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

html5 dinosaur

A spinning 3D canvas dinosaur created by the guys at Zynaps


Galactic

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

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

kevs3d spinning ball

A collection of multiple 3D elements spinning when you click them.


Internet Explorer Logo

spinning internet explorer

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

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

morphing power cubes

Cube in cube in cube! A great animation which rotates in 3D mode.


Spinning Globe

spinning globe

Yet another cool animation with Terra spinning gloriously around it's axe.


HTML5 Icon

html5

After Internet Explorer logo spinning, is time for the king HTML5 to spin gloriously.


Tunneler

tunneler

Whenever you click on the screen it generates a colorful fractal. It follows your cursor and generates nice drawings.


Asteroid Belt

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

twirl sphere

A circle which moves randomly on a picture which gets twisting effect.


Canvas 3D

3d photo gallery

A one of a kind 3D photo gallery spinning. You can click on each square to reveal a new photo.


FishBowl

fishbowl microsoft

A project started by Microsoft to test the HTML5 rendering performance.


DNA Model

dna model

A biology friendly animation which features the structure of DNA. You have 6 different schemes to choose from.


Walking

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

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

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

google images 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

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

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

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

html5 landscape

A pretty nice landscape loop exploring new territory.


Particle Sphere

particles

Looks like a discoball, but is actually a pretty nice HTML5 animation.


Zoetrope

zoetrope

A new type of HTML5 animation based on a vintage film / cinema style.


CanvasMol

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

coca cola

When you scroll to right the Coca-Cola can moves. This animation was created entirely using CSS3 elements.


CSS Book

3d css book

A nice looking flexible CSS book in 3D. The actual animation was created in CSS3.


3D Clock

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

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

clouds

Just clouds coming towards you. However, the animation is pretty smooth making you think that you are actually in the clouds.


Asteroids

asteroids

It started as a benchmark test for all the common operations in HTML5, but it became a pretty interesting 3D animation.


3D City

3d city

A project brought by Cubiq. It shows a 3D spinning city in a continuous loop, is pretty cool.


Bouncing Ball

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

3d collection

A nice collection of 3D elements created with HTML5 and CSS3 by ThreeJS.


Mechanical Engineering

keyframe

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

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

spinning 3d cube

Just a simple classic, spinning cube with 6 faces showing text and texture elements on each face.


3D Earth

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

3d 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

cloth simulation2

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/

No comments:

Post a Comment