人气超高的HTML5特效排行榜TOP 10

   现在市面上有一大批HTML5页面模板制作工具,虽然方便了很多非专业设计师制作HTML5页面。但是不得不吐槽的是,很多模板工具平台上的作品大部分还停留在左飞入右飞出的初级境界,想感受真正精妙的高级特效,这10个专业人士的作品不得不看咯。

  本文来自优设合作媒体 数英网。

  1. 粒子特效

  星际传奇:这是探索宇宙的门票


  百度百科:为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器,脚本来控制其整体或单个的运动,模拟出现真实的效果。

  2. SVG路径动画

  元小望:SVG练习NO.1_描述孤独


  简而言之,就是让SVG的描边像是有人绘制一样的动画效果。动画轻巧不失真,特别适合那些崇尚简约设计风格的网页。

  3. 序列帧动画

  大众点评:我们之间只有一个字


  百度百科:序列帧动画是只在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样,不但给制作增加了负担而且最终输出的文件量也很大,但它的优势也很明显:逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容,而它类似与电影的播放模式,很适合于表演细腻的动画。例如:人物或动物急剧转身、头发及衣服的飘动、走路、说话以及精致的3D效果等等。

  4. 全线性动画

  腾讯UP大会:生命之下,想象之上


  全线性动画可以理解为动画连续,几乎不间断播放,像视频一样流畅细腻。

  这支HTML5页面打破了传统幻灯片式的呈现方式,塑造出了一种宽广、素雅、幽静的整体感受,该作品也被很多人推崇为HTML5里的动画片。

  5. Cinemagraphic

  Levi’s: “换”醒你的夏天


  什么是Cinemegraphic?如果你不知道,就有点OUT了。顾名思义,Cinema是电影摄影,Graph是图片,Cinemagraphic是一项将神奇的局部运动赋予静态照片的新技术。

  其中Cinemagraphic的应用恰到好处地了诠释了“自然风”的概念,只见画面上,人物的头发和衣角飞舞着,仿佛吹拂着一阵阵自然风,在炎炎夏日,他们依旧感受着清爽,尽情玩耍。作为互动者的人们,当看到画面上被风拂过的Cinemagraphic动态场景,他们也身临其境地感受到自然风所能带来的这种清爽感受。

  下面说说和交互相关的动画特效。

  6. 全景

  杜蕾斯的第一座美术馆


  虚拟全景美术馆的概念并不新鲜。其鼻祖应该是 Google 的 Art Project,让你能够在线浏览全世界大多数博物馆和美术馆。杜蕾斯“美术馆”的创新,在于它其实是热门广告形式HTML5页面的伪装。“我们想要通过多重手段(比如馆内的彩蛋、12 点闭馆无法访问等等)来创造一个虚拟的真实空间,而不是传统HTML5的单线程教育的逻辑。” Socialab 杜蕾斯组的负责人说,“液体主义群展将是杜蕾斯美术馆无数展览中的第一个。”

  7. 3D

  康师傅:2015最飞羊的新春祝愿


  祝福灯笼可以360旋转呈现,而且具有夜空繁星中题字灯笼飞来飞去的3D炫目效果,彰显“最飞羊的新春祝愿”。其中意趣和精妙所在,恐非文字所能表述。

  8. 点击碎屏

  大众点评:这个陌生来电你敢接吗?


  “点击屏幕”不新鲜,但是这种屏幕击碎的画面好像也特别讨人喜欢,大概有三轮左右的“击碎”动作,这是整个HTML5的互动高峰。发现这种“屏幕敲击”的常规动作特别有惯性,点一点就停不下来。是不是抓住了手机族的某些“强迫症”特点。

  9. 长按逐字

  韩寒再谈一加:1步1步看清韩寒


  整个HTML5页面用打字机的形式呈现,随着用户按下按钮,纸片会逐渐显示出韩寒从1999年起,为人熟知或不知的成长轨迹。触发逐字等动效很有真实感。

  10.滑动触发

  腾讯视频:这一幕你期待已久


  长页HTML5,滑动触发动效,和呆板的幻灯片式样的HTML5页面拉开了距离。Epub360虽然能实现带动效带触发的长页,但是目前暂时还不能实现这种滑动触发动画。

时间: 2024-08-01 18:23:48

人气超高的HTML5特效排行榜TOP 10的相关文章

美国餐饮企业社交化排行榜Top 10:星巴克居首

互联网作为一种先进的生产力,自20世纪http://www.aliyun.com/zixun/aggregation/16333.html">90年代兴起以来迅速地改变着越来越多的传统行业.餐饮行业与普通消费者的日常生活息息相关,近年来也加快了和互联网结合速度.品途咨询整体国外数据时发现,随着网络社交化时代的到来,部分美国餐饮企业通过积极参与,已经率先在社交媒体及社交网络上建立起了自己的品牌优势.美国餐饮新闻网(NRN)以美国主流的三大社交媒体及社交网络(Facebook,Twitter和

全球APP开发商Top 10发布 中国占席一半表现抢眼

近日,移动应用数据分析公司Sensor Tower发布了App Store 2015年第四季度统计报告. 中国的应用开发商这一季度表现抢眼,在全球开发商排行榜中占据了一半席位,与美国开发商平分Top 10.而下载量最多二十个应用中,中国开发的app有六个,较上一季度增长一位. 基于下载量的全球应用开发商排名 (2015 Q4) 在开发商Top 10中,上季度排名第二的腾讯公司在第四季度超越谷歌,登上全球开发商榜首,旗下微信.QQ等产品下载量约1.5亿次.其后是百度和淘宝两家互联网巨头,分居第五和

CSS3+HTML5特效9 - 简单的时钟

原文:CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍)                       实现原理 利用CSS3的transform-origin 及 transform 完成以上效果.   代码及说明 1 <style> 2 @-webkit-keyframes rotateLabel { 3 0%{ 4 -webkit-transform-origin:0% 100%; 5 -webkit-transform: rotate(0deg); 6 } 7 100

Transact-SQL排名大幅攀升12个名次进入Top 10

2003-2013年TIOBE编程语言排行榜2014年1月TIOBE编程语言排行榜Comments Transact-SQL在2013年最后一个月击败了其他竞争力对手,成为TIOBE 2013年度编程语言.2011年和2012年的年度编程语言是Objective-C.Transact-SQL获得年度编程语言多少有点意外,因为它的主要应用领域–微软的数据库引擎SQL Server已经不是那么流行了,所以一般说法是2013年太过平淡了.过去几年,TIOBE年度编程语言的得主在一年内都取得了很大进步.

Cassandra杀回数据库排行Top 10,及需求Java 7的2.0版本

在MySQL被Oracle收购后,业内对这个开源数据库的议论就从未停止,对于PostgreSQL将取而代之成为最人气开源数据库的声音也从未停歇.然而从DB-Engines排行榜来看,PostgreSQL与MySQL之间的差距远不只是"几层楼"那么高(PostgreSQ得分不到MySQL的零头).着眼整个排行榜上的193个数据库,我们会发现NoSQL数据库已占大半江山,榜上有名的传统关系型数据库管理系统仅余75个. 上图为9月份最新的排行,在Oracle稳坐头把交椅的同时,MySQL与M

Cassandra杀回数据库排行Top 10

在MySQL被Oracle收购后,业内对这个开源数据库的议论就从未停止,对于PostgreSQL将取而代之成为最人气开源数据库的声音也从未停歇.然而从DB-Engines排行榜来看,PostgreSQL与MySQL之间的差距远不只是"几层楼"那么高(PostgreSQ得分不到MySQL的零头).着眼整个排行榜上的193个数据库,我们会发现NoSQL数据库已占大半江山,榜上有名的传统关系型数据库管理系统仅余75个. 上图为9月份最新的排行,在Oracle稳坐头把交椅的同时,MySQL与M

CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局

原文:CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局 效果演示     实现原理 使用3个div(一个是顶部栏,一个是左侧栏,一个是右侧栏): 使用checkbox作为判断是否显示和隐藏右侧栏,点击显示和隐藏label实现最终效果.   代码说明 css <style> body { font-family:"Microsoft YaHei",arial,sans-serif; margin: 0px; padding: 0px; color: #66

聊聊OS X鲜为人知的细节设计 TOP 10

  编者按:说到OS X,作者的描述是:在其精致却不张扬的 UI 下所蕴藏的是无数对于细节的追求.这些细节下的设计总会在不经意间让你体会到水果对于完美的定义和对用户体验的追求.究竟有哪些细节令人惊叹而又鲜为人知,在这里作者选出了自认为「少数派」的十项细节设计. 在 OS X Yosemite 正式发布前,让我们一起来聊一聊有关 OS X Mountain Lion 的十大细节设计,不过在开篇前先说个题外话. 1997 年,德国大众启动了一项名为 D1 的项目,目的是打造一台可以与奔驰 S-Cla

计算机史上最昂贵的域名 Top 10

网络域名,也就是我们平常打开浏览器时输入的苹果官网--确切地说,只有中间的"apple"可以称之为域名.你能想象这样的几个字母可以卖出几十 万,甚至上百万美元吗?相信大多数域名的诞生之初只是为了进行相关的业务,但是随着时间的推进,也许你手中的域名也许会一些小企业还要值钱. 不相信?我们一起来看看外媒评出的史上最昂贵域名 Top 10,看看你能猜中几个: No.10:Shopping.de 德国的网络域名,2008 年由 Unister GmbH 购买,售价为 196 万欧元. No.8