阅读更多

8顶
1踩

Web前端

原创新闻 Adobe 的 HTML5 实验

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

  • 【java毕业设计】智慧社区教育服务门户.zip

    有java环境就可以运行起来 ,zip里包含源码+论文+PPT, 系统设计与功能: 文档详细描述了系统的后台管理功能,包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。 系统管理模块:允许管理员重新设置密码,记录登录日志,确保系统安全。 新闻资讯管理模块:实现新闻资讯的添加、删除、修改,确保主页新闻部分始终显示最新的文章。 公告管理模块:类似于新闻资讯管理,但专注于主页公告的后台管理。 社区影院管理模块:管理所有视频的添加、删除、修改,包括影片名、导演、主演、片长等信息。 会员上传下载管理模块:审核与删除会员上传的文件。 留言管理模块:回复与删除所有留言,确保系统内的留言得到及时处理。 环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7及以上 数据库工具:Navicat11及以上 开发软件:eclipse/idea Maven包:Maven3.3及以上

  • 基于selenium的携程机票爬虫资料齐全+详细文档+高分项目+源码.zip

    【资源说明】 基于selenium的携程机票爬虫资料齐全+详细文档+高分项目+源码.zip 【备注】 1、该项目是个人高分项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

  • 【java毕业设计】智慧社区宠物管理系统(源代码+论文+PPT模板).zip

    zip里包含源码+论文+PPT,有java环境就可以运行起来 ,功能说明: 文档开篇阐述了随着计算机技术、通信技术和网络技术的快速发展,智慧社区门户网站的建设成为了可能,并被视为21世纪信息产业的主要发展方向之一 强调了网络信息管理技术、数字化处理技术和数字式信息资源建设在国际竞争中的重要性。 指出了智慧社区门户网站系统的编程语言为Java,数据库为MYSQL,并实现了新闻资讯、社区共享、在线影院等功能。 系统设计与功能: 文档详细描述了系统的后台管理功能,包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。 系统管理模块:允许管理员重新设置密码,记录登录日志,确保系统安全。 新闻资讯管理模块:实现新闻资讯的添加、删除、修改,确保主页新闻部分始终显示最新的文章。 公告管理模块:类似于新闻资讯管理,但专注于主页公告的后台管理。 社区影院管理模块:管理所有视频的添加、删除、修改,包括影片名、导演、主演、片长等信息。 会员上传下载管理模块:审核与删除会员上传的文件。 留言管理模块:回复与删除所有留言,确保系统内的留言得到及时处理。

  • 免费下载:Civil War (Stuart Moore)_xVBgd.zip

    免费下载:Civil War (Stuart Moore)_xVBgd.zip

  • JSP基于WEB的图书馆借阅系统的设计与实现(源代码+论文)(2024pw).7z

    1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于计算机科学与技术等相关专业,更为适合;

Global site tag (gtag.js) - Google Analytics