Я новичок в html5/CSS3/jquery, и я делаю это (еще не закончил): http://catherinearnould.sio4.net/autres/kat/ Проблема в том, что из-за большого холста с частицами анимация не такая плавная, как могла бы. Так что, если вам скучно, не стесняйтесь взглянуть на мой код и дать мне несколько советов по улучшению плавности ^^
Большое спасибо!
Например, использование RequestAnimationFrame() вместо setTimeout(), вероятно, сделает все более плавным. См. запись в блоге Пола Айриша requestAnimationFrame для умной анимации.
Большие потери производительности, скорее всего, вызваны динамически вычисляемыми/визуализируемыми атрибутами CSS, такими как прозрачность, тени и закругленные углы.
Также имейте в виду, что изменения в элементах DOM, вызывающие перекомпоновку, обходятся дорого (например, анимация), см. http://code.google.com/speed/articles/reflow.html.
Я вижу большую разницу сразу после запуска этого:
$('*').css({backgroundColor:'transparent', opacity:1, boxShadow:'none'});
Если можете, замените всю (полу-)прозрачную и закругленную графику эквивалентными изображениями png.
Вы также можете подумать об использовании перехода css3 для некоторой анимации и удалении и добавлении новых классов к элементам для изменения их стилей, а не делать это с помощью javascript (jQuery). Используйте jQuery в качестве запасного варианта для старых браузеров и IE.
http://www.w3.org/TR/css3-transitions/
http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/
Это дает браузеру возможность выполнять рендеринг, а в некоторых случаях, например в iOS, вы можете получить аппаратное ускорение для рендеринга.
Что касается элемента холста, у меня мало опыта в этом, но меня интересует тот эффект, который вы создаете. Но я думаю, что массовая анимация холста в начале — это слишком, столько всего уже происходит, может быть, в этом эффекте нет необходимости? Просто мое мнение как пользователя.
