1

如果您使用 Safari 在线访问您的 mobile me 帐户,您可以选择一个图标并直接登录到选定的服务,顺便说一句,这是一个很棒的功能。

但是,如果您使用其他浏览器(如 firefox 或 Chrome)访问同一页面,您会看到一个华丽的登录页面,中间没有巨大的云(MobileMe 徽标)和有趣的轻球。

这是链接: https ://auth.me.com/authenticate?service=mail&ssoNamespace=appleid&formID=loginForm&returnURL=aHR0cHM6Ly9tZS5jb20vbWFpbC8=

最棒的是,您可以将鼠标悬停在那些小光球上,它们会跟随您的鼠标移动。

它很漂亮,我从未在 Javascript 中看到过类似的东西。我无法通过查看他们的代码来理解他们是如何做到的。当然,他们的 javascript 被压缩了,所以我看不到它,但在标记中,那些闪亮的灯光只是一堆画布标签。

有没有人知道如何制作这样的东西?它可能超出了我的 javascript 技能,但将这样的效果添加到我的一个项目中会很棒。

提前感谢您的所有建议;)

4

2 回答 2

1

这需要很多技巧。我相信它可以通过 processing.js http://processingjs.org/实现

于 2011-04-01T23:45:19.827 回答
0

看看这个[引用]:

那么,这款养眼糖是如何完成的呢?通过超过 6000 行(未缩小的)JS。MobileMe 通常在其应用程序中使用SproutCore,但在查看源代码后,我没有找到对它的单一引用。然而,登录页面中使用的库似乎确实有一些相似之处,但我认为这是非常定制的。屏幕上的每个视觉组件似乎都有一个类,如果不是两个单独的动画库(一个 2d 和一个 3d),至少有一个类,一个粒子渲染库,以及用于处理画布绘制和 DOM 操作的库。

所以它看起来像是定制的。您可以在这里阅读更多内容:http: //badassjs.com/post/1649735994/the-new-mobileme-login-page-has-some-badass-js

我希望这有帮助。

于 2011-10-14T22:46:16.047 回答