资讯频道 → Web前端
阅读更多

8顶
1踩

Web前端

原创新闻 Adobe 的 HTML5 实验

2012-10-18 15:32 by 副主编 wangguo 评论(6) 有10633人浏览
html5 adobe css javascript

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

尽管HTML5技术差不多已经将Adobe的Flash逼上了绝路，但这并不意味着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
  • 大小: 111.5 KB
  • 大小: 13.1 KB
  • 大小: 139.6 KB
8
顶
1
踩
评论 共 6 条 请登录后发表评论
6 楼 firstfall 2012-10-22 08:53
‘尽管HTML5技术差不多已经将Adobe的Flash逼上了绝路’ 标题党 在这误导新人 有意思么
5 楼 theoffspring 2012-10-20 10:57
用svg做动画也太麻烦了吧。除非有库。
4 楼 ltian 2012-10-19 12:44
JS不能编译，让我这眼神不好的人实在太痛苦了。
3 楼 cwfmaker 2012-10-19 11:13
SVG，是个好东西，之前在做flex的时候，还有个开源的项目birdeye，也是用svg
2 楼 damoqiongqiu 2012-10-19 09:27
还没看明白Adobe想干嘛，难道要用左手干右手？
1 楼 mengyancui 2012-10-19 09:14
Adobe还是牛逼啊！   

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • HTML5和CSS3 WEB技术开发

    B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本...

  • Adobe edge animate制作HTML5动画

    Edge Animate是Adobe出品的制作HTML5动画的可视化工具，简单的可以理解为HTML5版本的Flash Pro。Adobe Edge Animate的目的是帮助专业设计师制作网页动画乃至简单游戏。目前该工具的重点放在动画引擎上，将增加更多...

  • adobe epub html5,【CS6新功能介绍】EPUB 和 HTML5

    该楼层疑似违规已被系统折叠隐藏此楼查看此楼EPUB 和 HTML5EPUB 导出工作流程经过了简化，您现在可以选择要导出到的 EPUB 版本。“导出为 EPUB”对话框经过了重新组织和简化。有关如何导出为 EPUB 的简要概述，请...

  • HTML5基础

    一起进入html5的世界吧！

  • Adobe Flash终结者：HTML5

    我们都知道，绝大多数...Adobe最近宣布，Flash Professional CC将改名为Animate CC，“它将成为Adobe主要网络动画工具，用于开发HTML5内容，同时继续支持创建Flash内容。”这个新软件将在2016年年初发布，并将推出...

  • web音视频播放器（html5）方案总结

    虽然 HTML5 不直接支持 MPEG-DASH，但是已有一些 MPEG-DASH 的 JavaScript 实现允许在网页浏览器中通过 HTML5 Media Source Extensions（MSE）使用 MPEG-DASH。另有其他 JavaScript 实现，如 bitdash 播放器支持...

  • HTML5视频与字幕使用的介绍

    经常会使用到的就是 Adobe Flash 这样的插件，很多人可能和我一样遇到过 Flash 插件崩溃的问题，让人相当烦躁，而在 HTML5 中，提供了音频和视频的标准接口使这一局面得到了改观，在这个实验中，我们将为大家介绍...

  • html5是什么？

    HTML5是用于取代1999年所制定的HTML 4.01和XHTML 1.0 标准的HTML标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些HTML5技术。HTML5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库...

  • websocket html5,连接到HTML5 Websocket

    我对HTML5 Websockets有些困惑.我已经看了很多教程,其中有很多不同的连接使用不同的端口.这些港口是什么意思？例如Adobe,使用这个：new WebSocket('ws://localhost:1740');那么另一个tutorial就没有必要的端口：new ...

  • 【四万字总结】对于HTML5的一些总结与实践

    在本节中，我们将总览 HTML5 的新变化，HTML5 文档、HTML5 新特性等。 知识点 HTML5 代码规范 HTML5 的改变 在接下来我们将深入 HTML5 的各个新特性，了解它们的用途，掌握它们的语法，最终达到熟练使用 HTML5 的...

  • html5 流媒体 原理,基于HTML5的FLV流媒体播放技术的研究与实现

    摘要：随着信息技术的不断发展,互联网相关服务与产品逐步融入了人们生产生活的方方面面。其中,以网络直播和短视频播放为代表的流媒体播放服务正逐步成为人们...本文通过分析传统流媒体播放技术方案的不足,结合HTML5...

  • ffmpeg转码html5,FFMPEG转码技术在HTML5视频系统中的研究与应用

    而使用HTML不能在浏览器上实现显示动画视频,音频,绘图等的动态效果,因此,当今唯一可实现在网页中嵌入视频,同时可使用户忽略浏览器和操作系统的方法是使用Adobe Flash插件结合object和embed标签,然而在安装Flash插件...

  • HTML5开发环境搭建

    跨平台移动开发实际上就是基于HTML5开发软件界面和主要的业务逻辑，因此一套完善的基于移动平台的HTML5开发环境是非常有必要的。这里我主要的关注点是以下四点： Javascript和Jquery mobile的编辑器HTML5的各个...

  • html5样式表,CSS3+HTML5_css,css3,html5,html5教程_html5,css,css3-站长之家

    CSS 3 + HTML 5 是未来的 Web，它们都还没有正式到来，虽然不少浏览器已经开始对它们提供部分支持。本文介绍了 5 个 CSS3 技巧，可以帮你实现未来的 Web，不过，这些技术不应该用在正式的客户项目，它们更适合你的...

  • HTML5新特性归纳和同类比较

    1 HTML5新特性简介 2 与Flash，APP的应用场景、发展趋势比较 3 简单推介几个HTML5游戏的资源

  • xiuno模板知乎蓝魔改版源码附多个插件.zip

    xiuno模板知乎蓝魔改版源码附多个插件

  • webview支持html5视频播放实例.zip

    android 源码学习. 资料部分来源于合法的互联网渠道收集和整理，供大家学习参考与交流。本人不对所涉及的版权问题或内容负法律责任。如有侵权，请通知本人删除。感谢CSDN官方提供大家交流的平台

  • PLC04-1 S7200.ppt

    PLC04-1 S7200.ppt

  • CODESYS-2.3.9.61 WAGO-SW0759-0333-V20200326-Codesys-S-2020

    CODESYS_2.3.9.61 WAGO_SW0759-0333_V20200326_Codesys_S_2020

  • DSP原理及应用总复习.ppt

    DSP原理及应用总复习.ppt

Global site tag (gtag.js) - Google Analytics