Creating an animated logo

V

Vladimir2012-04-14 12:44:18

JavaScript

Vladimir, 2012-04-14 12:44:18

For my web project I decided to make a series of animated logos. Type such as does google for different events.

The task is essentially elementary (logos for 4 seasons):
a simple picture that displays the website logo and a simple cyclic animation (wind, snowdrifts and snow; moving grass and a jumping bird; daisies and a flying butterfly; falling yellow leaves

) with animation. I spent half a day reading various articles on animation on the web, and did not understand which approach is easier to use: javascript sprite animation, canvas or svg.

Maybe I'm confusing warm with soft. But I have no idea which way to dig.
I would be very grateful for links, recommendations on the topic, or for some other way to share my experience.

ZY: animated gifs and flash are not suitable.

Reply

Answer the question

In order to leave comments, you need to log in

9 answer(s)

A

Anatoly, 2012-04-14
@taliban

“simple cyclic animation” Still, a gif would be better =) I don’t understand why it takes a lot of time for such a simple task.

I

Ivan Maslov, 2012-04-14
@student_ivan

Why is the gif not suitable? Gif is just a universal cross-browser solution. Personally, I find it convenient to draw GIF animation in Adobe Photoshop

V

Vitaliy Petrychuk, 2012-04-14
@vermilion1

I recommend sprites. habrahabr.ru/post/130193/

M

miguelle74, 2012-04-14
@miguelle74

You can do it easier - create in flash, if you have the skills and convert to HTML5 using labs.adobe.com/technologies/wallaby/ . Accordingly, here is the article - habrahabr.ru/post/115124/

V

Vladimir Sokolovsky, 2012-04-14
@inlanger

Just the other day, we analyzed CSS3 animation - it turns out quite cool, you can learn and write a simple animation after a couple of hours of reading the documentation and examples. The only negative is IE<9 and Opera is still in the span.

S

Stdit, 2012-04-14
@Stdit

GIF should be perfect. If you need a true color, then a composition from PNG + JS animation. If IE8 doesn't care, then Canvas.

V

Vitaly Zheltyakov, 2012-04-14
@VitaZheltyakov

It all depends on the presence of a transparent background and cyclicity. If the background is not transparent, then it is better to move towards the gif. If you need a certain (for example, by event) cyclicity or a transparent background, then we use a png-sprite and jQuery.spritely.

V

Vladimir, 2012-04-14
@de1vin

Answer to everyone who offers a gif:
Because I want to do more complex animation in the future. And this task is just right for learning.

V

Vampiro, 2012-04-15
@Vampiro

habrahabr.ru/post/140286/