HTML5 canvas navigation

mrcheez

I'm looking for an example of a site that does the following through HTML5:

See the attached image:


When a user arrives on the site they will see a series of overlapping circles (with text in them like "About Us" or "Sample Projects" etc).

When you click a smaller circle it will enlarge through animation and come to the fore, then open a hidden panel with information on the selected subject, and the other circles will shrink in size, or perhaps re-arrange in a fluid format. Then closing the hidden panel will reset everything back to the way it was (animated of course).

I'm sure something like this must have been done many times before (it does sound like something you would see on a flash site) but in HTML5. Anyone seen anything similar to this?

Something like this shows how the elements can interact with each other (but this is far more advanced than what I'm looking for):
http://mrdoob.com/projects/chromeexperiments/ball-pool/

Buford T Justice

That link you've posted is a javascript solution. Not sure if this can be accomplished without javascript

Aswerty

This is something that you should be able to do with CSS3 and HTML5. HTML5 on it's own isn't enough (and for this you probably would be fine with HTML4), the core functionality for animation is contained within CSS3.

Some things not quite what you are looking for are:

http://codepen.io/deineko/pen/XJLEgG

and

http://codepen.io/schoenwaldnils/pen/LHBvD

From these you can see that animated widgets are possible using CSS3 since it supports animations and transformations. Googling around didn't get anything similar to what you're looking for but I don't expect it's overly difficult to implement.

mrcheez

Buford T Justice wrote: »

That link you've posted is a javascript solution. Not sure if this can be accomplished without javascript

Sorry I should have made clear I'm not hung up on it being HTML5 and javascript is also acceptable, I was just assuming HTML 5 animation is the way to go on this.

mrcheez

Aswerty wrote: »

Googling around didn't get anything similar to what you're looking for but I don't expect it's overly difficult to implement.

Cheers, yep not overly difficult but if it's been done before then it cuts development time by 50%

mrcheez

Found the following which I guess is the closest example...

http://www.informationisbeautiful.net/visualizations/worlds-biggest-data-breaches-hacks/

Seems to be using TweenJS