2

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

看着萤火虫，该网站只有一个云图像（我可能错了），我认为在某种程度上重新创建它会很有挑战性，因为我正在学习 jquery。

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

  1. 我很讨厌 jquery
  2. 我可能需要一些指导

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

然后，我想，如果我在背景中有一个基础层云，我可以为 2-3 个云设置动画并让它看起来不错.. 但基础层看起来更糟..

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

谢谢。

出现“无法提交问题，因为：不要仅链接到 jsfiddle”错误。：/

这是jsfiddle中的一些代码：

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

更新

在浏览了更多的站点后，我发现整个站点的代码都是开源的……任何人都可以下载和贡献。

该代码可在谷歌上找到

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

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

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

4

1 回答 1

0

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

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

于 2013-01-22T18:09:44.060 回答