网站示例代码 - >来自Adobe的富有表现力的网站 [英] Sample Code for site -> the expressive web from Adobe
问题描述
我一直关注富有表现力的网站网站。我在 google 上做了一些网站的R& D，但没有得到解释网站制作概念的令人满意的链接。
虽然我知道它是在 html5 ， css3
任何人都可以帮助我做这个？
富有表现力的网站是为了让HTML5和CSS3的惊人的创意可能性给开发者留下深刻的印象。但它是一个玩具的例子。底层技术就像一堆div动画和css转换一样简单。 这是关于乏味的生产和令人印象深刻的艺术努力。 b $ b这种任务最适合的技术是WebGL。
这里有一些理由考虑：
-
此时HTML5 + CSS的实现，可能有大的覆盖。但是你仍然不能在旧的浏览器上运行它，或者使用垫片，因为它太重了，甚至不能在所有现代浏览器中正常工作。
-
DOM渲染时间真的很糟糕。
$ -
这样你就可以用简单的几何体，而不是灯光效果或着色器。粒子系统或变形，并且几乎所有的代码都将在GPU上执行，因此它的真实性将非常接近本地代码，并为手持设备节省电池。
- p>这真的是不可扩展的。您不能只是按比例增加桌面，而缩小为手持。
-
CSS + HTML具有性能开销，因为对象的每一面都是DOM的一部分。
-
我没有工具（据我所知）使用这种图形效果的资源。但是你可以找到大量的软件（包括免费的）来使用这样的框架，如three.js或其他常见的3D管道工具，包括使用声明框架，如 http://www.x3dom.org/
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 is being made.
Although i know that it is made in html5, css3 but i was looking for some sample code that will help me to do some coding stuff of it.
Can anyone help me into this?
"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/
这篇关于网站示例代码 - >来自Adobe的富有表现力的网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
