Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I am using HTML5 in the same way everyone seems to be using it these days, meaning: HTML5 tags, Canvas / 3D / javascript and CSS3.

I am struggling to find examples of sites that are using these technologies practically and that are not just a demo of something cool someone has managed to do using Canvas or CSS3 transforms or shapes.

I am looking for sites that have a nice visual look but also take advantage of things like animation, scrolling and offset à la Silverback or the Canvas to create an interactive and I guess 'Flash-looking' site.

These are some examples that I have found:

Scrolling

Animation

Other

I am using HTML5 loosely and I hate to be using it. I would be happy if you listed a really visually appealing Javascript-based site but it didn't have the HTML5 doctype.

share|improve this question
    
Pirates was very good, but why does it have such a huge memory leak? I played it, but it got laggy. Looked at my Task Manager to find out that it was up to 1.6 GB of RAM! Whoever made it needs to either relinquish the memory or recycle it. It shouldn't be getting anywhere near 1.6 GB. =/ –  Michael Jan 26 '11 at 13:05
    
@Michael Maybe it's a browser issue. I played it for about 2 hours without any lag in Chrome. –  Evan Plaice Feb 11 '12 at 20:36

7 Answers 7

up vote 6 down vote accepted

I find these 2 sites to be good & practical examples of HTML5 usage -

share|improve this answer

The Stack Exchange network (of which this site is a member of) uses HTML5 for its authentication. That's why you can visit any site in the network and once you've logged in manually at least once, it will automagically log you in later.

Try it out - if you have membership on more than one site (say, here and Stack Overflow), clear all your cookies and temporary files. Then log in here, and then go to Stack Overflow and don't log in. Give it a few seconds and it will automatically log you in, even though the domains are totally different.

share|improve this answer

Yeah, in fact, I did it a long time ago... 2-3 years ago, I'd guess. I made a web site that basically allows people to move stuff around on a floor plan to see if their furniture fits. It was done with JavaScript, but the problem was that JavaScript didn't have a very good way to rotate the furniture.

Back when IE didn't support the canvas tag, this meant using a different image for 0,5,10...85 -degree turns, and then I'd rotate those images by 0, 90, 180, or 270 degrees in order to cover rotations from 90 to 355 degrees. Not only was it annoying to create, but it was quite slow in its execution. FF, which supported the canvas tag, could rotate the furniture pretty much in real-time, but IE's rotation of it was pretty terrible. IE took somewhere between 0.75 and 1.00 seconds to respond, and doing it at 5-degree increments was terribly annoying.

share|improve this answer

Here's a nifty flash-like website made by Chris Coyier of CSS-Tricks.com: http://chris-mcgarry.com

Chris mainly is using JQuery here, with the aim being that a visitor can play the music tracks and navigate to any page without the music stopping.

Chris is a strong advocate of using Html5 now. This example does not really use that many Html5 elements, but it really captures the spirit of a flash-free future.

share|improve this answer

Our site (We, the Pixels) is founded upon using the HTML5's canvas. We use it in a way that Flash would normally be used, and in fact had to use Flash for IE, because excanvas just wasn't cutting it for what we needed.

The site isn't all canvas, but it's main application component is.

Hope this helps.

share|improve this answer

I'm not sure why you would ask for examples of HTML5-based pages without the simple HTML5 doctype--I'd want the unequivocal switch for that mode. Anyway, this site makes rather extensive use of the single-page principle with contextually-applied graphics using HTML5 and CSS3 techniques: https://www.airbnb.com/annual/

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.