Повторить свечение javascript вокруг гигантского облака на странице входа в MobileMe?

Если вы подключаетесь к своему мобильному аккаунту через Интернет с помощью Safari, вы можете выбрать значок и войти непосредственно в выбранный сервис.

Но если вы зайдете на ту же страницу, используя другой браузер, такой как Firefox или Chrome, вы увидите великолепную страницу входа в систему с большим, но не огромным облаком посередине (логотип MobileMe) и из него выходят интересные маячки.

Вот ссылка: https://auth.me.com/authenticate?service=mail&ssoNamespace=appleid&formID=loginForm&returnURL=aHR0cHM6Ly9tZS5jb20vbWFpbC8=

И самое главное, что вы можете навести курсор на эти маленькие световые шарики, и они следуют за движением вашей мыши.

Это просто красиво, и я никогда не видел ничего подобного в Javascript. И я не мог понять, глядя на их код, как они это сделали. Конечно, их javascript сжат, поэтому я не могу на это взглянуть, но в разметке эти блестящие огни - всего лишь куча тэгов.

У кого-нибудь есть идеи, как сделать что-то подобное? Вероятно, это намного выше моих навыков работы с JavaScript, но было бы здорово добавить такой эффект в один из моих проектов.

Заранее спасибо за все ваши предложения;)

2 ответа

Решение

Посмотрите на это [цитата]:

Итак, как же получается эта глазная конфета? Через более 6000 строк (неунифицированного) JS. MobileMe обычно использует SproutCore для своих приложений, но после просмотра исходного кода я не нашел ни одной ссылки на него. Однако на странице входа в систему, похоже, есть некоторое сходство с библиотекой, но я думаю, что она довольно обычная. По-видимому, для каждого из визуальных компонентов на экране существует класс, по крайней мере, одна, если не две отдельные библиотеки анимации (одна 2d и одна 3d), библиотека рендеринга частиц и библиотеки для работы с рисованием на холсте и манипулированием DOM.

Похоже, это было сделано на заказ. Вы можете прочитать больше здесь: http://badassjs.com/post/1649735994/the-new-mobileme-login-page-has-some-badass-js

Надеюсь, это поможет.

Это требует много навыков. Я считаю, что это достижимо с processing.js http://processingjs.org/

Другие вопросы по тегам