带你看Adobe的HTML5实验
尽管HTML5技术差不多已经将Adobe的Adobe Flash Player逼上了绝路,但这并不意味着Adobe要始终与HTML5为敌。相反,Adobe现在也是HTML5技术的主要支持者之一。
Adobe的Web平台团队正在实施一些新的图形特性,并在一个网页中通过讲故事的形式展示出来,你可以直接在thegraphicalweb.com中观看,也可以通过这个视频来观看。
该项目使用到的技术主要包括:
1. SVG(Scalable Vector Graphics,可缩放矢量图形)
由于SVG的扩展性以及易于与CSS/ JavaScript操作特性,该技术被贯穿使用在thegraphicalweb.com网站中。其中动态SVG创建和动画效果,基于一个流行的SVG数据可视化库D3.js。D3在该网站中主要用于在背景中生成群山的形状。
2. CSS3和SASS
在网站中,主要使用CSS Animation和Transforms属性来实现闪烁和移动效果,这些属性被应用到内联SVG的路径和元素上。SASS是构建于CSS之上的元语言,扩展了CSS3,增加了规则、变量、混入、选择器、继承等特性。该网站主要使用Sass来生成良好格式化的CSS代码。
3. 2D Canvas
在网站中,使用Processing.js来实现一个粒子系统,通过切换点阵的组合形式,来呈现一个说话的人脸效果。
4. 着色器
该网站使用了一个自定义的GLSL着色器,来实现WebGL场景中发光的背景效果。通过CSS Filter Lab这个工具,编写自定义着色器的难度大大降低。
此外,该网站还使用3D Transforms来实现场景旋转、缩放效果,使用HTML5 Audio来播放音频。
该网站的源码托管在Github,感兴趣的Web开发者可以下载学习。
演示网站:thegraphicalweb.com
项目源码:https://github.com/adobe/graphicalweb-keynote
【带你看Adobe的HTML5实验】相关文章
5. 让Chrome的HTML5 video/audio tag支持更多种音视频格式
6. IE10不支持WebGL,Chrome的HTML5游戏性能是其22倍
8. Adobe 发布HTML5 动画制作工具Adobe Edge
9. Adobe发布HTML5网页动画工具{Adobe Edge}
本文来源:https://www.51html5.com/a2912.html
﹝带你看Adobe的HTML5实验﹞相关内容
- Chrome实验网站:各种新奇事物让你爱不释手
- 10 个惊人和创造性的 CSS3 实验
- Adobe Creative Suite 6: 更强大的HTML5能量
- HTML5是App Store的掘墓人
- Google的Native Client微笑着抽了HTML5一记漂亮的耳光
- HTML5实现的Loading缓冲效果
- CSS3 HTML5实例一(圆角)
- CSS3 HTML5实例二(图形化边界)
- CSS3 HTML5实例三(块阴影与文字阴影)
- CSS3 HTML5实例四(使用 RGBA 实现透明效果)