• Apps
• Design
• Marketing
• News
• How To
• Answers

Stunning HTML5 Sites Filled With Impressive 3D Elements

At the end of last year we talked about HTML5 and I showcased some of the greatest tricks and how to make them. I must say that I’m pretty happy of the result and I see that you all enjoy reading that article. Now, I wanted to approach the subject again, but from a different angle which shows indeed what HTML5 can do for you and your online business.

Many people believe that HTML5 is not worthy of their time and the technology is not advanced enough to support tricky animations and heavy elements. If you are among those persons who believes that Flash is more reliable and powerful I’m here to prove you wrong. Has been proven that HTML5 is a lightweight, powerful and easy to use platform which is currently under heavy development and been in the attention of mobile manufacturers too. In fact, HTML5 represents the future of mobile browsing and that’s because of it’s comprehensive and lightweight abilities.

In order to prove my point I decided to list some of the heaviest animations and elements available, for that I’ve chose 3D websites because these are always tricky and hard to obtain.

Recommendation: For best results, please use a browser that supports HTML5 such as Google Chrome, Latest Versions of Firefox or Opera

Hello Racer

This is a beautiful HTML5 concept created by the experts from HelloEnjoy.com using a popular framework script called three.js . In this presentation you can even control the beautiful Formula1 car in a nice 3D vision…not to say about the image rendering which is simply beautiful.

Video Destruction

This is one of the elements that has also been featured in the HTML5 tricks article and to be honest is one of the most impressive HTML5 canvas works I’ve ever seen. What the script does, is to tear the video into hundreds of pieces when clicked, and recreating it like nothing happened while the video is running.

3D Canvas

Great animation with spinning effect. The Canvas is based on 3 layers (panels) each containing 9 square pieces where are different colors. Just click on a square and you will see a random image instead of the color.

The Cloth Simulation

A creation of Andrew Hoyer, a nice cloth simulator based on lines and dots. In fact, every point is a constant with no actual dimension and is based on mass and location. Just click and drag any of the points available on the “clothing item” to manipulate it.

Galactic

This is a Microsoft initiative under the Internet Explorer project created with the support of NASA images of the Solar System. The view is simply amazing and the fact that you have full control over positioning it makes it even more beautiful.

Google Images Gift-box

A very nice combination of HTML with CSS3 resulted in a image search box for Google. The box follows the cursor and you can input text no matter the position of the box.

Social Weather Mapping

This is not just a brilliant design feature, but it also comes with great functions too. The Social Weather Mapping or Small Talk App brings a live weather feed for most popular locations. The elements are placed in a Google Earth mode so you can zoom in to whatever location you want with ease.

Canvascape – Counter Strike

One of the greatest canvas manipulation tricks I’ve ever seen. The Canvascape project by Ben Joffe manages to recreate the Counter Strike engine making the HTML game look quite real.

HTML5 Logo Spinning

Simply beautiful radiant HTML5 logo spinning continuously and giving you a nice 3D view of it. You can also control the direction of the spin by clicking and dragging the logo.

CubeOut Tetris

If you are a fan of Tetris, then you will most definitely enjoy this brilliant creation especially because it is in 3D and it comes with an advanced control panel.

Angry Birds

There is no need for me to say how cool Angry Birds can be. There are over 500 million downloads of this game on mobile and many others on PC. The Angry Birds HTML5 version comes with exactly the same features just cooler.

Cut The Rope

Yet another popular game available for iOS devices and Android users. This time is a HTML5 version which comes with better graphics and of course better resolution.

Torus

Yet another amazing HTML creation by Ben Joffe – Torus or Round 3D Tetris is probably the greatest Tetris game I’ve ever played in my life and believe me that I’ve played lots of them.

Visual Player

Is a player for lyrics and music which also has a cool background created by red dots which are spinning giving you a nice 3D view of a sphere rotating.

DNA Model

Everybody knows how complex is the structure of DNA so it is no need for me to say how hard is to place it in a nice 3D model. This example does exactly that in 7 different color schemes.

The Art of Stars

A very detailed map for every major star, constellation and pretty much every detail on them on a simple yet very interesting globe-like image which is rolling giving you a neat sphere effect.

Liquid Particles

Liquid particles are amazing because of their color and the group movement, but when they follow your mouse cursor, the effect is amazing and you can even strike them to the wall. When you hold the mouse in one point, they gather together so when that happens and you click is like a beautiful explosion.

Asteroids in HTML5

This effect is quite simple yet very cool. If you are familiar to Windows and it’s screensaver then you will recognize the falling asteroids one in this.

 

Asteroids Reloaded

This time we don’t talk about an asteroid storm, but an actual game created using HTML5. To play you have to use the arrow keys and try to run from being hit by these huge asteroids.

 

WebGL PhotoBox

Simple photo-gallery created in a box. Just click on each photo to see a nice 3D cubicle moving and changing the photo gradually.

Sphere

If until now we talked about sphere’s based on text or just projections, this time we talk about an actual sponge-like sphere which can be controlled by the mouse clicks.

Type Water Text

Just like the Sphere bellow, this is brilliant project created by Mr. Doob who’s also responsible for creating one of the most important HTML5 Frameworks called three.js . The Water Type allows you to create your own water text while it’s moving.

Interactive Typography

Add live bevels to text by just rolling the mouse over.This is a great HTML5 animation example featured in 4 demos at Tympanus Network.

Curvy

Is an interactive puzzle-style game which describes a labyrinth.

Helicopter Game

Another great game with simple graphics and nice functions, but one that really shows how many things can you achieve using HTML5 technologies. Just try not to smash the helicopter on the walls! (unlike I did in the screeshot )

The Christmas Tree

I know that the Christmas has just passed, but this is a must-check piece of art. The tree was designed 100% in HTML5 like the text and the snowflakes.

Dino

The perfect model of a dinosaur which is spinning in all direction and which can be controlled by you.