在MobileMe登錄頁面上覆制圍繞巨型雲的JavaScript發光？

如果您使用Safari在線訪問您的手機me賬戶，您可以選擇一個圖標並直接登錄到選定的服務，很棒的功能btw。在MobileMe登錄頁面上覆制圍繞巨型雲的JavaScript發光？

但是，如果您使用其他瀏覽器（例如firefox或Chrome）訪問同一頁面，您會看到一個華麗的登錄頁面，中間有一個巨大的雲（MobileMe徽標）以及有趣的燈泡。

這裏的鏈接： https://auth.me.com/authenticate?service=mail&ssoNamespace=appleid&formID=loginForm&returnURL=aHR0cHM6Ly9tZS5jb20vbWFpbC8=

而最大的事情是，你可以將鼠標懸停那些小光球，他們也跟着你的鼠標移動。

它只是很漂亮，我從來沒有見過類似的東西在Javascript中。我無法理解他們的代碼，他們是如何做到的。當然，他們的javascript是壓縮的，所以我不能看它，但在標記中，那些閃亮的燈光只是一堆畫布標籤。

有沒有人有如何做這樣的想法？它的方式可能超出了我的JavaScript技能，但將這樣的效果添加到我的項目中會很好。

在此先感謝您的所有建議;）

來源

2011-04-01 Robson Junior

爲什麼不看頁面的源代碼和JS文件，看看你是否找到任何東西？ – Nathan 2011-10-14 22:38:27

此外，注意到它在非CSS3瀏覽器中不起作用（在IE7中測試過），看起來它周圍的小浮動可能是JavaScript和CSS3的組合...... – Nathan 2011-10-14 22:40:54

實現這個【引用】看看：

那麼，這是怎麼秀色可餐實現的呢？通過超過6000行（未分類）JS。 MobileMe通常使用SproutCore作爲其應用程序，但在查看源代碼後，我沒有發現對它的單一引用。但似乎在登錄頁面中使用的庫有一些類似的，但我認爲它是非常自定義的。對於屏幕上的每個可視組件，似乎都有一個類，至少一個如果不是兩個單獨的動畫庫（一個2D和一個3D），一個粒子渲染庫和用於處理畫布繪製和DOM的庫操縱。

所以它看起來像它是定製的。你可以在這裏閱讀更多：http://badassjs.com/post/1649735994/the-new-mobileme-login-page-has-some-badass-js

我希望這有助於。

來源

2011-10-14 22:46:16 Nathan

需要很多技能。我相信，它與processing.js http://processingjs.org/

來源

2011-04-01 23:45:19 danniel

是的，處理似乎是一種方式。也許是時候學習一門新的語言了:)感謝您的提示。 – 2011-04-04 02:21:08

在MobileMe登錄頁面上覆制圍繞巨型雲的JavaScript發光？

回答

相關問題