jquery - 如何在浏览器中获取 'moving through clouds'动画？

Question

我看到了chrome experiment website最近..虽然实验本身令人惊奇，但在实验开始之前，网站上有一个介绍页面，背景中有云彩移动。

看看firebug，网站上只有one cloud image (我可能是错的)并且我认为在某种程度上重新创建它会很有挑战性，因为我正在学习 jquery。

经过几个小时的尝试不同的事情后，有两件事是显而易见的:

1. 我对 jquery 很烂
2. 我可能需要一些指导

最初，我尝试在屏幕底部插入随机数量的云，并通过 jquery animate 更改不透明度和高度+宽度..但结果却慢得离谱..

然后，我想，如果背景中有云的基础层，我可以为 2-3 朵云制作动画并使其看起来不错......但是 base layer looks worse ..

您能给我一些关于如何实现这一目标的提示吗？

谢谢。

<小时/> 收到“无法提交问题，因为:不要仅链接到 jsfiddle”错误。 :/

这是 jsfiddle 中的一些代码:

<div>
    <div class="inner one"></div>
    <div class="inner two"></div>
<div>

<小时/> 更新

在探索了该网站的更多内容之后，我 discovered整个网站的代码是开源的..并且任何人都可以下载和贡献。

代码是available on google

云朵动画是通过webGL完成的；我不熟悉的东西。我将尝试在 jquery 中重现该效果 - 可能不太好，但我认为这个挑战值得一试。

同时，如果有人理解或知道如何在 jquery 中模拟这一点，请告诉我。

如果我设法在 jquery 中复制它；我会将其作为答案发布。

Answer 1

您展示的示例使用了 HTML5 的新功能之一 Canvas，它也非常适合创建动画等。您可以使用一些 JS 和 canvas 来创建这种效果，但您也可以使用 jQuery 来完成同样的事情而不使用 canvas，但我认为 jQuery 方法会更密集并且需要更多资源。这个想法可能是先有几个基础云层，然后再有几个前面的云，这些云从后面开始并在一小段时间内生长。所有这些图像都需要是透明的 img，因此您需要 Photoshop 之类的工具。不过，他们所做的并不是那么困难，它很可能是一个连续的循环，循环浏览多个图像，改变尺寸并稍微移动它们以创建您看到的效果。看看这个网站，它使用 Canvas ，但要复杂得多:

http://disneydigitalbooks.go.com/tron/