如何在浏览器中获得“穿越云层”动画？答案

【问题标题】：How to get the 'moving through clouds' animation in browser?如何在浏览器中获得“穿越云层”动画？
【发布时间】：2013-01-04 19:53:51
【问题描述】：

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

看着萤火虫，网站只有one cloud image（我可能是错的），我认为在某种程度上重新创建它会很有挑战性，因为我正在学习 jquery。

在尝试了几个小时不同的事情之后，有两件事很明显：

jquery 很烂
我可能需要一些指导

最初，我尝试在屏幕底部插入随机数量的云，并通过 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 中复制它；我会把它作为答案发布。

【问题讨论】：

步骤 1) 查看源代码。第 2 步）广泛阅读。
@Blazemonger，已经尝试过查看源代码 - 那里没有人类可读的内容.. 此外.. 正文中没有单个 html 元素-__-
是的，他们正在使用画布和最小化的 JS 代码。这并没有改变我们在代码which you can't see yourself 中看不到任何内容的事实。 StackOverflow 是获取特定错误和问题解决方案的好地方，但我们不会为您编写完整的教程。
@Blazemonger，啊！不知道，谢谢，会试一试！
@Alexander：请找出并回答您自己的问题。你最后的评论听起来很有希望你会这样做。

标签： jquery css jquery-animate

【解决方案1】：

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

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

【讨论】：