Sample Code For Site -> The Expressive Web From Adobe

I have been following the expressive web site. I have done some R&D of the site on the google but did n't get the satisfactory link that explains the concept that how the site

Solution 1:

"the expressive web" was made to impress developers with the new amazing creative possibilities of the HTML5 and CSS3. But it is a toy example. Underlying technology is as simple as bunch of divs animated and transformed with the css. It's all about tedious production and impressive artistic effort. The most suitable technology for this kind of tasks is WebGL. And it's, actually, will be easier to implement.

Here some reasons to consider:

• At this moment HTML5 + CSS realisation, probably, has large coverage. But still you can't run it on older browsers or use shims because it's too heavy and it even don't work properly in all modern browsers. So you will end up with flash\html5 video fallback anyway.

• It's really bad for the DOM render time.

• This way you are stuck with the simple geometry and no lighting effects or shaders.

• You can implement it with the simple particle system or morphing and almost all of your code will be executed on the GPU so it will have pereformence really close to native code and will save battery for the handhelds.

• It's really inextensible. You can't just scale up for desktops and scale down for handheld. But with WebGL it's trivial including simplifying of the geometry.

• CSS + HTML has performance overhead because every side of an object is part of the DOM.

• There is no tools(as far as i know) to work with assets for this kind of graphic effects. But you can find plenty of software(including free ones) to work with such frameworks as three.js or other common 3D pipeline tools including really simple to use declarative frameworks like http://www.x3dom.org/