如何在瀏覽器中獲取'穿越雲彩'動畫？

Question

最近我看到了一個chrome experiment website ..雖然實驗本身非常棒，但是有一個網頁的介紹頁面，有云在背景中移動......在實驗開始之前。

看着螢火蟲，網站只有one cloud image（我可能是錯的），並且我認爲在我學習jquery的過程中重新創建它會很有挑戰性。

幾個小時嘗試不同的事情後，有兩兩件事是明顯的：

1. 我在jQuery的吸
2. 我可能需要一些指導

起初，我試圖將雲的隨機數在屏幕的底部，並通過jquery動畫改變不透明度和高度+寬度..但它竟然是可笑的慢..

然後，我想想，如果我在背景中有一層底雲，我可以將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

您展示的例子使用Canvas作爲HTML5新功能之一，它也非常適合創建動畫等。你可以使用一些JS和canvas來創建這個效果，但是你也可以使用jQuery來完成同樣的事情，但是我認爲jQuery方法會更加密集並且需要更多的資源。這個想法可能會有一個基礎層的雲，然後有更多的前端雲，你會在後面開始並在一段時間內增長。所有這些圖像都需要透明，所以你需要像Photoshop一樣的東西。他們在做什麼，雖然並不難，它最有可能是連續循環，通過幾次改變圖像大小和他們稍微移動打造你看到效果循環。檢查本網站了，它使用的畫布，但它的複雜得多：

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