Простые частицы jQuery, похожие на me.com

У меня есть проект для моего клиента. Он включает в себя что-то похожее на старую домашнюю страницу me.com (больше не работает)

Хотя это выглядело примерно так: http://lokeshdhakar.com/projects/mobileme-particles/

Я хочу использовать HTML CSS JQUERY, а не flash (она попросила flash, пытаясь сказать, что flash — умирающая технология)

У меня есть опыт работы с jQuery, но с простой анимацией и вещами типа затухания - никогда не с частицами, и я не могу найти учебник по нему, который говорит на моем языке.

Моя цель в основном состоит в том, чтобы сделать заставку — с ее логотипом посередине, и эффектом будут маленькие частицы, похожие на приведенный выше пример URL — но входящие в логотип, а не наружу.

Есть ли у кого-нибудь опыт в этом или, может быть, указать мне направления, где я могу узнать больше об этом ..

У меня скоро будет рабочая страница ... но я хотел, возможно, выложить это там.

Спасибо, -О

/////////////////////// ОБНОВЛЕНО Нужна дополнительная помощь ////////////////////////

У меня есть рабочая демоверсия. Но нужна помощь с jquery

У меня есть скрипка http://jsfiddle.net/muhupower/cneJT/2/

  1. Я не могу понять, как центрировать эффект прямо за большим логотипом...

  2. Кроме того, после центрирования при изменении размера окна браузера эффект не остается в центре.

  3. Это немного сложнее, возможно ли просто иметь постоянный эффект с частицами, а не через пару секунд, когда они затухают и перезапускаются?

Это также загруженная версия. http://lillystreet.com/demo/


person MuhuPower    schedule 25.07.2012    source источник
comment
Я думаю, что частицы в jQuery — это плохая практика. В основном потому, что функция .animate() использует параметр с именем step. Шаг вызывается (по-моему, по умолчанию) каждые 17 миллисекунд. Если у вас есть частицы, вы, вероятно, будете иметь сотни (если не тысячи) одновременных функций анимации. Это приведет к огромным проблемам с производительностью на стороне клиента. Вы можете попробовать изменить шаг, чтобы сделать его длиннее, но я все еще предвижу проблемы.   -  person Ohgodwhy    schedule 25.07.2012
comment
Я также подумал, что могу предоставить что-то конструктивное: ссылка, которую вы отправили, представляет собой холст HTML5, этот пример jsFiddle использует HTML5 Canvas, и вы сможете увидеть, что происходит. Этот эффект принадлежит thecodeplayer.com   -  person Ohgodwhy    schedule 25.07.2012
comment
Мне нравится jsfiddle, я буду продолжать возиться с этим, чтобы, возможно, получить эффект, который я ищу. ВОПРОС? это отмечено огромной производительностью на стороне клиента, что будет большой проблемой? Я планирую, чтобы это был очень легкий эффект частиц... не так много частиц, не так много, кроме 100 или около того, медленно тяготеющих к логотипу....   -  person MuhuPower    schedule 25.07.2012
comment
Возьмите старый рабочий стол P4 или Duo-Core первого поколения (не Core 2 Duo) и запустите сайт, проверьте сами. Трудно теоретически ответить из-за переменных.   -  person Ohgodwhy    schedule 25.07.2012
comment
К вашему сведению: Ссылка в вашем вопросе указывает на Firefox v14 с большим скачком загрузки ЦП до 23% на машине XP с 4 ядрами.   -  person arttronics    schedule 25.07.2012


Ответы (1)


Я сделал очень простой плагин для такого эффекта.

Вот демонстрация

person Pierre de LESPINAY    schedule 02.05.2014