HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > 带你看Adobe的HTML5实验

带你看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实验】相关文章

1. 带你看Adobe的HTML5实验

2. 15个令人震惊的HTML5实验

3. 15个令人震惊的HTML5实验

4. 几个绝对让你疯狂的HTML5和JS实验性展示

5. 让Chrome的HTML5 video/audio tag支持更多种音视频格式

6. IE10不支持WebGL,Chrome的HTML5游戏性能是其22倍

7. 微软解释IE的HTTP/2协议 及对于互联网的意义

8. Adobe 发布HTML5 动画制作工具Adobe Edge

9. Adobe发布HTML5网页动画工具{Adobe Edge}

10. 站在HTML5技术最前端的Chrome实验

本文来源:https://www.51html5.com/a2912.html

点击展开全部

﹝带你看Adobe的HTML5实验﹞相关内容

「带你看Adobe的HTML5实验」相关专题

其它栏目

也许您还喜欢