20 Cool Websites Using HTML5

February 14, 2013 · 2 comments

by Anders

html5 websites

I think few will disagree that HTML5 is the future of web development. It has introduced web designers to a palette of enhancements and new tags for a variety of cool features, that previously required proprietary plugins like Flash. The major browsers continue to add these features to new versions and many of them are already supported.

As a web designer this new trend is exciting, and it’s important to keep up with the development and the all new possibilities. Please note though that HTML5 is still in working progress, and it is not expected to be fully approved until 2014. This means that W3C is still making changes to the standard and that some visitors will not benefit from the new features.

Below, I have compiled a list of cool websites implemented using HTML5 tags. We have also posted an article about pre-designed HTML5 web design templates. One of the cool new features with HTML5 themes is responsive design. You can use this as inspiration for your own website or to be impressed of the awesomeness which HTML5 brings to the table. Have fun browsing this collection, and please add your comments and suggestions below. I also encourage you to share this post with your friends and co-workers.


ElegantThemes
ThemeForest

Advertisement

BuffaloWildWings

On this website you will find a really fun HTML5 game implemented using the canvas element. Dont get started playing if you are in a hurry…. you will be late then… This is a true HTML5 showoff and proff that Flash is up for some real competition!

buffalowildwings

Dropr

Dropr have a really cool simplistic navigation design and a carefully created and unique design overall. The front page have a “infinte loading” script to get the features descriptions when visitors scroll. The explore menu opens a right sidebar where various navigation options are available. The pages are loaded without reloading the web page, using ajax .

Don’t forget to try out the “Splash” full screen feature… it is cool and a great example of interactive HTML5 design. Spend some time exploring as there are many hidden gems here!

waytoogood[3]

Sony Tablet

The Sony product showcase use a really cool vertical scrolling of HTML5 sections where images, backgrounds and text fly in from the bottom. When the mouse is at the bottom of the page the cursor is followed by an interactive button. This is a cool and unique navigation idea. On the right the sections can be navigated using a traditional menu.

sony-tablet

Leadmotion

Leadmotion have created a unique website with a stunning interactive slider. It is not just swapping slides but taking visitors on a time line journey with lots of animated elements.

leadmotion

Lamoulade

This is a must see website if you like alternative and to the edge use of new options. It is a parallax scrolling design and I found the variations and effect to be simply…jaw dropping. Have a look for yourself!

lamoulade

We New

We New is an amazing HTML5 and one page style website with loads of animated effects. The footer is really cool as a it slide into the page from the bottom. It features a moving backgournd that makes the fish silhouettes move across the screen.

we-new

Phive

Phive has some nice features to explore as a visitor. The slider has a effect that allows you to drag the sporty people into other angles or see other images. There’s also a cool drop down feature that allows you to see more or less of the images.

phive hmtl5 website

Dangersoffracking

This is a parallax scrolling website that takes visitors through an amazing visual journey… see it for yourself!

dangerofraking

This website have some really cool animations and use a well implemented one page layout. It starts with a vertical loader screen and when it enters the front page visitors see a grill with nice animated smoke (images being swapped). When clicking the Find out why button or the timeline to the left the page scrolls to the next page. The last page “Explore” have all the options to explore flying in from the top.

Elladesign

There is not a lot of HTML5 and CSS animation on this page, but it the design is very illustrative and HTML markup is used on the pages.

elladesign

PmBennett

One page layout for the front page with a really simple navigation. There is a fun hover effect on the logo.

pmbennett

Cartelle

Cartelle has a huge slider on the front page with a cool timer effect. The website also uses grid-like design for their blog which work quite nice.

cartelle

WoodWork

WordWork has a stunning way of showcasing their work using a slider effect. If you click on one of the pictures the rest of the slider images will be pulled to the side just like a theater curtain – check it out! Online portfolios like this can be created fast using templates with portfolio layout. Check this collection out.

woodwork

Vivas Communication

This website has a splash of colors moving in the background as you scroll down. It’s a cool effect for a creative website. Full screen background websites are great for showcasing creative work. It is not hard to get a website with this kind of effect. All you need to WordPress and a fullscreen website template.

vivas

1minus1

This website has a beautiful design with lots of well crafted illustrations. They have a nice little animation effect on the front page illustrating how their work support key customers – check it out.

1minus1

Diesel

Diesel has a cool hover effect link on the front page and a convincing product “showroom” with a bigheaded zoom and nice front/back view option.

diesel

PWL Partnership

A beautiful full screen website with a dynamic slider that support the beautiful pictures.

pwl-partnership[3]

Touchtech

This website has a cool way of combining slider effect and floating images with navigation.

touchtech

Diehlgroup

This website has a nice one-page design with an awesome full screen slider. It has a calm minimalistic design and grey color combination making it right for a serious business website.

diehlgroup

ExtraBold.

This website has a very dynamic front page with floating images and fonts. You just want to scroll all way to the end. The designer has used a nice color combination and with help from HTML5 he gives visitors a cool experience.

extrabold

Hyper

This is a beautiful designed website with an awesome slider, floating objects and a cool portfolio. The designer make use of sections tag for the content blocks on the front page.

hyper

Author : Andy

Anders is Co-founder of Tripwire Magazine. He is into WordPress topics, Web design, Web-development and also interested in SEO and Online Marketing. He has started Splashmagazine.com and he’s also writing for other blogs. Anders is a passionate blues musician and a family-man, as well.

{ 2 comments… read them below or add one }

Carl114 October 27, 2012 at 1:31 pm

These pages are nice. You do not feel, however, that they prefer the beauty before the usability? Web seems to me not to be a work of art.

Reply

Yort May 6, 2013 at 4:23 pm

True, the web is a place primarily for business and learning. However, so are museums. And what do they ALSO have… pretty pictures.

I believe you have to be innovative to stand out online, and these certainly do that. Kudos to the designers!

PS: Hellovica.com is not actually real… but it should be.:)

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous post:

Next post:


Web Analytics