xml地图|网站地图|网站标签 [设为首页] [加入收藏]
10个令人惊叹的HTML5和JavaScript效果,推荐10个HTM
分类:web前端

推荐10个HTML5游戏网站

2011/07/24 · HTML5 · HTML5

导读:原文作者Julio Rivera是一名来自纽约市的创意总监和网页设计师,他是Underworld Magazines的创始人。以下是全文。

到现在为止,我玩了好几年的在线游戏。我已经看过用Flash和其他软件制作游戏,目前是在用HTML5做游戏,只看到一个完整用CSS3做的游戏。

HTML5正在慢慢成为新的Flash,以前在Flash上很酷的东东,如拖放和下载条等,现在已可以用HTML5做到了。 HTML5的一个很好的资源,Github是一个不错的HTML5社交编程网站。在本文,我推荐10个HTML5的游戏网站,很多游戏开发商正在用HTML5开发新游戏。(相关阅读:2011年最经典的15个 HTML5游戏)

0. html5games.com

图片 1

1. html5games.net

图片 2

图片 3
2. canvasdemos.com

图片 4

3. rocketpack.fi

图片 5

图片 6
4. impactjs.com

图片 7

5. canvasrider.com

图片 8

6. freeciv.net

图片 9

7. gamesforlanguage.com

图片 10

8. yoyogames.com

图片 11

9. mozillalabs.com

图片 12

原文:Julio A Rivera  译文:敏捷翻译 – 关关

如需转载,但请注明原文/译文出处、译文超链接和译者等信息,否则视为侵权,谢谢合作!

赞 收藏 评论

图片 13

10个令人惊叹的HTML5和JavaScript效果

2011/06/30 · HTML5, JavaScript · 1 评论 · HTML5, Javascript

作为下一代网页语言,HTML5 拥有很多让人期待已久的新特性。如今,很多 Web 开发人员开始使用 HTML5 来制作各种丰富的 Web 应用。本文向大家展示10个让人眼花缭乱的 HTML5 和 JavaScript 效果,让你体验下一代 Web 技术的魅力,相信你看完这些例子后会对未来的 Web 发展充满无限期待。

Breathing Galaxies

图片 14

动态变换颜色和直径,可通过键盘或者鼠标产生新的形状,这个效果很炫很炫!

FlowerPower

图片 15

灵感来自大自然的使用,使用花朵作为画刷,以贝兹曲线方式绘图。

Noise Field

图片 16

移动鼠标可改变粒子的运动,点击可随机生成不同的粒子效果。

Keylight

图片 17

双击生成两个以后的键即可发出声音,移动键的位置可产生不同的声音效果。

Swirling Tentacles

图片 18

三维脉冲效果,沿着脉冲线有运动的颜色渐变模块。

Blob

图片 19

拖动水滴有重力效果,双击可以分离,小水滴碰到大水滴会合并。

Rotating Spiral

图片 20

旋转的螺旋效果,看得有点头晕,单击可以控制开始和停止旋转。
Magnetic

图片 21

模拟磁性粒子流效果,非常逼真。
Trail

图片 22

彩色颗粒跟随鼠标运动效果,带尾巴淡出效果。
Graph Layout

图片 23

一种交互的力向图布局效果。

原文:queness
译文:梦想天空

 

赞 2 收藏 1 评论

图片 24

一起理解 Virtual DOM

2016/11/14 · JavaScript · DOM

本文作者: 伯乐在线 - luobotang 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

前言

React 好像已经火了很久很久,以致于我们对于 Virtual DOM 这个词都已经很熟悉了,网上也有非常多的介绍 React、Virtual DOM 的文章。但是直到前不久我专门花时间去学习 Virtual DOM,才让我对 Virtual DOM 有了一定的理解,以致于要怀疑起很久之前看过的那些文章来。倒不是这些文章讲得不对,而是现在在我看来角度不太好,说得越多,越说不清。

让我能够有所开窍(自认为)的,是这篇文章:


Change And Its Detection In JavaScript Frameworks
Monday Mar 2, 2015 by Tero Parviainen


作者看问题的角度很棒,从数据变更与UI同步的角度来介绍各个典型框架,特别是对于 React 的 Virtual DOM,从这个角度理解起来更容易些。

感兴趣的同学,如果没有读过这篇文章,推荐去看一看,不感兴趣就算了。不过接下来我要讲的东西,部分整理自这篇文章,特别是从这篇文章中引用的图片,非常棒。当然还有我自己的一些思考,以及一些对于目前 Virtual DOM 实现的开源库的分析。

如果读了上面推荐的这篇文章,我倒是不介意你不再继续把本文读下去,因为有些东西你已经领会到了。当然,也不反对。

变化这件事

谈论页面的变化之前,咱们先看下数据和页面(视觉层面的页面)的关系。数据是隐藏在页面底下,通过渲染展示给用户。同样的数据,按照不同的页面设计和实现,会以不同形式、样式的页面呈现出来。有时候在一个页面内的不同位置,也会有相同数据的不同表现。

图片 25

Paste_Image.png

Web 的早期,这些页面通常是静态的,页面内容不会变化。而如果数据发生了变化,通常需要重新请求页面,得到基于新的数据渲染出的新的页面。

图片 26

Paste_Image.png

至少,这个模式理解起来挺简单不是吗。

直到 Web 应用复杂起来,开发者们开始关注用户体验,开始将大量的处理向前端迁移,页面变得动态、灵活起来。一个显著的特征是,数据发生变化之后,不再需要刷新页面就能看到页面上的内容随之更新了。

前端需要做的事情变得多了起来,前端工程师们也就修炼了起来,各种前端技术也就出现了。

首先,聪明的工程师们发现既然是在前端渲染页面,如果只是部分数据发生了变化,就要把页面整体或一大块区域重新渲染就有点笨了。为什么不把事情做得更极致些,只更新变化的数据对应的页面的内容呢?

怎么做呢?操作 DOM 呗。DOM 就是浏览器提供给开发者用于操作页面的模型嘛,直接通过脚本来调用 DOM 的各种接口就 OK 了。而且我们还有了像 jQuery 这样的棒棒的工具,操作 DOM 变得 so easy。

然而,页面越来越复杂,聪明的工程师们发现数据变化之后,老是需要手动编码去操作对应的 DOM 节点执行更新,有点烦,不够懒啊。于是各种框架如雨后春笋般出现了,纷纷表示可以简化这个过程。

稍微早期的框架有这样的:

图片 27

Paste_Image.png

开发者借助框架,监听数据的变更,在数据变更后更新对应的 DOM 节点。虽然还是要写一些代码,但是写出来的代码好像很有条理的样子,至少更容易理解和维护了,也不错嘛。

更进一步,MVVM 框架出现了,以 AngularJS 为代表:

图片 28

Paste_Image.png

仍然是数据变化后更新对应 DOM 节点的方式,但是建立这种绑定关系的过程被框架所处理,开发者要写的代码变少了,而且代码更易读和维护了。

再然后呢,大家就在这个棒棒的模式上继续深耕,纷纷表示还可以在性能上做得更好,前端领域一片繁荣。

再后来 React 出现了,它不仅不是 MVVM 框架,甚至连 MV 框架都不是。这年头,不是个 MV 框架还好意思出门?可 React 还真的带来了新的思路!

什么思路呢?

就是回到过去,回到那个简单而美好的时候。具体而言,就是每次数据发生变化,就重新执行一次整体渲染。的确这样更简单,不用去琢磨到底是数据的哪一部分变化了,需要更新页面的哪一部分。但是坏处太明显,体验不好啊。而 React 给出了解决方案,就是 Virtual DOM。

Virtual DOM 概况来讲,就是在数据和真实 DOM 之间建立了一层缓冲。对于开发者而言,数据变化了就调用 React 的渲染方法,而 React 并不是直接得到新的 DOM 进行替换,而是先生成 Virtual DOM,与上一次渲染得到的 Virtual DOM 进行比对,在渲染得到的 Virtual DOM 上发现变化,然后将变化的地方更新到真实 DOM 上。

简单来说,React 在提供给开发者简单的开发模式的情况下,借助 Virtual DOM 实现了性能上的优化,以致于敢说自己“不慢”。

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:10个令人惊叹的HTML5和JavaScript效果,推荐10个HTM

上一篇:没有了 下一篇:HTML5会成为移动应用的天敌吗,制作动画
猜你喜欢
热门排行
精彩图文