踏得网精选2016年度10大最佳HTML5动画

techbrood 发表于 2017-07-21 09:54:37

标签: html5, h5, webgl, 动画, 特效

- +

踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。

使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,千人一面乏善可陈,不入该列。

所涉及技术主要是:HTML5/CSS3/SVG/WebGL(Three.js)/ES6(BabelJS)。

TOP10: 镜花水月

使用SVG turbulence 滤镜实现的动画特效


TOP9: 海上生明月,天涯共此时

3D版本的水中月,使用Three.js 3D渲染引擎实现,光影效果很不错


TOP8: 机甲战士

使用WebGL实现的一个3D版本的射击小游戏(无情节),包含3D游戏的基本交互操作


TOP7: 魔镜魔镜

使用GIF图作为整体的场景动画,使用WebGL实现内嵌的魔镜特效,很有创意


TOP6: 亡命小兔

来一个相对完整的年度小游戏作品,使用Three.js和GSAP所实现。


TOP5: 时空隧道

超炫的HTML5/WebGL虫洞特效,体验玄幻穿越。


TOP4: 在线电子琴

使用柏林噪音算法实现的音乐自动演奏,使用Tone音效库实现的声音效果


TOP3: 雨中飞鸟

一个HTML5微动漫作品制作。淅沥沥雨中栖息在电线杆上的鸟儿,忽然传来一声犬吠,惊起一线飞鸿。

使用HTML5/SVG/CSS3制作动画,使用buzz.js实现音效。


TOP2: 花样年华

使用WebGL模拟时光流淌的动画,可用于电影特效


TOP1: 自由之枝

在HTML5/Canvas上绘制分形树生长动画。使用鼠标划线,帮助树枝摆脱束缚,变身自由飞翔的小鸟!

虽无3D之炫酷,但极富创意和寓意,故此排在第一位。



possitive(24) negative(4) views14773 comments1

发送私信

最新评论

何以预言 2018-08-07 15:41:45

返回一个i就,


请先 登录 再评论.
相关文章
  • 2019年NodeJS框架Koa和Express选型比较

    Koa和Express都是NodeJS的主流应用开发框架。
    Express是一个完整的nodejs应用框架。Koa是由Express团队开发的,但是它有不同的关注点。Koa致力于核心中间件...

  • CentOS6 Apache2.2用域名配置多虚拟机

    在CentOS下使用域名配置多虚拟机的步骤如下:
    1. 使用

  • 如何使用BabylonJS加载OBJ或STL模型

    BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域。
    本文说明和演示如何使用babylon.js来加载一个标准3d模型文...

  • A-Frame WebVR(网页虚拟现实)快速开发入门教程

    WebVR和WebGL应用程序接口使得我们已经可以在浏览器上创建虚拟现实(VR)体验,但从工程化的角度而言,开发社区还需要更多方便强大的开发库来简化编程,Mozilla的

  • JavaScript语言多编程范式简介

    和C++等语言类似,JS支持多范式(paradigms)编程。我们常常混合这些范式来完成一些大型Web项目。JS支持3种编程范式:命令式、面向对象和函数式。命令式(Imperative JavaScript)命令式就是简单的从上而下完成任务,流水账过程式编码风格:function

  • NodeJS、Java和PHP性能考量和若干参考结论

    首先需要说明的是,严格而言NodeJS和Java、PHP并非对等概念,NodeJS是基于JS的一个应用程序,而Java/PHP是语言。我们这里实际指的是分别使用node、java和php来实...

  • 使用SVG和CSS3创建圆形进度条动画

    圆形进度条是一个经典的控制面板元素,常用于显示任务进度,比如用户档案的完整程度,或者升级状态。有很多方法来实现圆形进度条,比如用JS, CSS3, Canvas, SVG...

  • 学习使用CSS制作进度条

    进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下:.pb-scope

  • Three.js入门教程5 - 10个必须知道的编程技巧

    作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在c...

  • Three.js入门教程2 - 着色器(上)

    之前我已经给出了一篇

  • S3TC(S3 Texture Compression)纹理压缩格式详解

    使用S3TC格式存储的压缩纹理是以4X4的纹理单元块(texel blocks)为基本单位存储的,每纹理单元块(texel blocks)有64bit或者128bit的纹理单元数据(texel data)。这...

  • 使用top/left/margin和CSS3 translate两种方法实现标题居中的性能差异详解

    要实现标题全屏居中(同时在垂直和水平方向居中),有若干种方法,包括使用弹性布局、表格单元、绝对定位、自动外边距和CSS3平移变换等。你可能已经使用了这些方...

  • D3.js读取外部json数据

    D3.js是一个很好的数据可视化工具,支持从web服务读取json数据,或者从外部文件如.json, .csv文件中直接读取。由于部分服务比如flickrs上的图文数据服务需要VPN...

  • Processing.js和P5.js的功能简介和区别

    什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
    什么是Processing.js为了能让Proce...

  • 更多...