阅读更多

8顶
1踩

Web前端

原创新闻 Adobe 的 HTML5 实验

2012-10-18 15:32 by 副主编 wangguo 评论(6) 有10703人浏览
尽管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游戏的资源

  • 脆弱水印技术在图像篡改检测中的应用与挑战,脆弱水印技术在图像篡改检测中的应用与挑战,脆弱水印的图像篡改检测 ,脆弱水印; 图像篡改; 检测; 图像处理,基于脆弱水印的图像篡改检测技术

    脆弱水印技术在图像篡改检测中的应用与挑战,脆弱水印技术在图像篡改检测中的应用与挑战,脆弱水印的图像篡改检测 ,脆弱水印; 图像篡改; 检测; 图像处理,基于脆弱水印的图像篡改检测技术

  • 高效Delta机械臂运动控制卡:前瞻轨迹规划,G代码编程,多维插补,激光切割与绘图,机器视觉集成,扩展坐标与旋转功能,一键脱机运行,大容量存储,基于前瞻运动轨迹规划的Delta机械臂运动控制卡:高效G

    高效Delta机械臂运动控制卡:前瞻轨迹规划,G代码编程,多维插补,激光切割与绘图,机器视觉集成,扩展坐标与旋转功能,一键脱机运行,大容量存储,基于前瞻运动轨迹规划的Delta机械臂运动控制卡:高效G代码编程,圆弧插补与激光切割功能,配合机器视觉实现精准操作。高效精准操作与管理工具的创新型机械运动控制解决方案。,delta机械臂,delta机器人,运动控制器,运动控制卡 本卡采用前瞻运动轨迹规划,运动采用G代码指令编程,具有G5三维空间的圆弧插补,空间直线插补功能,子程序编程功能,逻辑判断语句功能,示教编程功能(支持手柄),变量位置编程功能,动态PWM激光输出功能(兼容舵机控制信号),动态频率脉冲输出功能,通用输入输出功能。 可极简单的实现绘图雕刻,3维激光切割功能。 轨迹图形可xy平面整体旋转功能。 可利用变量位置,获取外部坐标要求,可轻松配合机器视觉。 支持探针功能,测平面,测外形等。 可设置4组平移工件坐标系,2组参考原点。 新增2组空间旋转工件坐标系,支持任意图形直接空间旋转。 卡上一键脱机RAM区运行功能。 2M程序容量。 断电后位置记忆,变量坐标位置记忆,计数器记忆。 伺服

  • 通用MySQL数据库备份系统.zip

    毕业设计

  • 大规模语言模型参数高效微调方法综述与分类:理论依据、实证对比和应用指南

    内容概要:随着模型参数量不断扩大,如从BERT到GPT-3,传统微调方法变得不可行。文章聚焦于参数高效微调(PEFT)策略,系统探讨了几十余种方法,包括加法型、选择型、重构型及其混合方法。文中详细介绍各类PEFT的具体操作(如引入额外参数、冻结部分权重等),并通过广泛实验验证其在大型预训练模型上的适用性和性能。特别指出,PEFT在保持高性能的同时极大减少了计算与内存成本,并针对十几亿乃至几十亿参数级别的模型展开测试与讨论。 适用人群:适用于从事大规模机器学习模型研究、开发的应用科学家和技术专家,尤其是那些希望通过减少资源消耗实现高效微调的技术团队成员。 使用场景及目标:该文章适用于希望在有限资源条件下优化大模型性能的人群。帮助研究人员理解不同类型PEFT的优点和局限,为实际项目中选择合适技术路线提供建议。其目的是为了指导开发者正确理解和应用先进的PEFT技术,从而提高系统的运行效率和服务质量。 其他说明:本文不仅提供了详尽的方法介绍和性能对比,而且为未来的研究指明方向,鼓励创新思维的发展,旨在推动参数有效调优领域的进步。同时提醒注意现有的挑战和未解决问题。

  • 磷酸铁锂体系电池COMSOL模型构建解析与实践指南,磷酸铁锂体系电池COMSOL建模分析与优化方案探讨,出一个磷酸铁锂体系电池comsol模型 ,建立磷酸铁锂体系电池; comsol模型; 电池模拟

    磷酸铁锂体系电池COMSOL模型构建解析与实践指南,磷酸铁锂体系电池COMSOL建模分析与优化方案探讨,出一个磷酸铁锂体系电池comsol模型 ,建立磷酸铁锂体系电池; comsol模型; 电池模拟; 模型构建; 锂离子电池。,构建磷酸铁锂体系电池Comsol模型,深入探索电池性能

Global site tag (gtag.js) - Google Analytics