1

I'm a newbie in html5/CSS3/jquery, and I'm making this (not finished yet): http://catherinearnould.sio4.net/autres/kat/ The problem is that, because of the large canvas with particles, the animations are not as fluid as it could. So if you're bored, don't hesitate to have a look at my code and give me some advice to improve the fluidity ^^

Many thanks!

Kateriine
  • 69
  • 1
  • 7

3 Answers3

1

For one using RequestAnimationFrame() instead of setTimeout() is likely to make things smoother. See Paul Irish his blog post requestAnimationFrame for smart animating.

Maurice
  • 27,582
  • 5
  • 49
  • 62
0

The big performance hits are most likely caused by live calculated/rendered CSS attributes such as transparency, shadows and rounded corners.

Also be aware of that changes to DOM elements which cause reflow is costly (such as animations), see http://code.google.com/speed/articles/reflow.html.

I see a big difference just after running this:

$('*').css({backgroundColor:'transparent', opacity:1, boxShadow:'none'});

If you can, replace all (semi-)transparent and rounded graphics with equivalent png images.

bennedich
  • 12,150
  • 6
  • 33
  • 41
  • Ok I changed the semi-transparents, and the order of the animations, now it looks quite nice to me. Thanks! – Kateriine Jan 13 '12 at 23:00
0

You could also think of using css3 transition for some of your animation and removing and adding new classes to the elements to changes their styles rather than doing it with javascript(jQuery). Use jQuery as a fallback for older-browsers and IE.

http://www.w3.org/TR/css3-transitions/

http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/

This gives the browser the power to do the rendering, and in some cases like in the iOS you can get hardware accelerated for the rendering.

For the canvas element, I have little experience with that, but I'm interested in that effect you're creating. But I think the massive canvas animation at the start is a bit much, there is so much going on already, maybe there is no need for that effect? Just my opinion as a user.

Einar Ólafsson
  • 3,036
  • 1
  • 19
  • 24
  • Well, actually you're right, I think I have to use CSS3 instead of js for the background. (When I turn off the js backgrounds, patricles are running perfectly) I'll make another script for IE (dammit, I taught the problems would be over with it) – Kateriine Jan 13 '12 at 15:26
  • Ok I tried CSS3 backgrounds but transitions are not possible on images background 'because it's a string' (as I read). So, now I changed the order of animations and it looks quite nice for me ^^ – Kateriine Jan 13 '12 at 22:58