0

I'm interested in making a logo for my website. I want to make it clickable and then it moves, but not in flash.

I'm pretty sure that Google uses the 'animated png' in HTML (something with sprites) but I'm not sure.

Another question, are they hard to make?

MortenMoulder
  • 6,138
  • 11
  • 60
  • 116

1 Answers1

1

You can make your own animated png by making a sprite sheet, setting up a div that is the dimensions of one frame that has the sprite sheet as a background image and then using javascript change the background position with a timer.

This should be quite easy to make yourself. An additional way of doing this (though it seems inefficient) is covered in detail on this post: Animated Image with Javascript

Community
  • 1
  • 1
zachzurn
  • 2,161
  • 14
  • 26
  • Sounds cool! I just wonder how Google made theirs... They're so epic! – MortenMoulder Mar 01 '13 at 21:32
  • Where can I see theirs, I may be able to tell you. – zachzurn Mar 01 '13 at 21:34
  • http://www.google.com/doodles/valentines-day-and-george-ferris-154th-birthday this is a cool one. – MortenMoulder Mar 01 '13 at 21:35
  • They are using css positioning and rotation to achieve the effect using absolutely positioned divs, the ferris wheels are being rotated using the css rotation property and the rest is done with top and left. I would assume they used some kind of animation program to do this as it appears very complicated to be done by hand. – zachzurn Mar 01 '13 at 21:43