Reputation: 3773

How to make animated websites with javascript

I hve seen a couple of really cool websites that are animated with javascript. Google have done a few animated interactive logos and this site too is animated with javascript (not the flash bit clearly).

Well how to do it? Is there some tool, framework etc that people use? I only know of jquery.

Upvotes: 0

Answers (5)

Biff MaGriff

Reputation: 8231

From examining their source it looks like volll rolled their own method of animation using javascript.

If you want to make graphical animations on your own site I would suggest having a look at the HTML5 canvas tag. https://developer.mozilla.org/en/Canvas_tutorial

Upvotes: 0

moonglum

Reputation: 786

I prefer SVG for interactive graphics, if you prefer Vector Graphics. I would suggest using Adobe Illustrator or something similar to produce the graphics and then use Raphael to animate it. If you want a really good introduction, go for the really good PeepCode Episode.

Upvotes: 0

hayesgm

Reputation: 9096

If your audience is newer, you should also consider CSS 3 Transitions.

 .animated {
   transition: all 0.3s linear;
   -webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s linear;  
   -o-transition: all 0.3s linear;
 }

Changing a style property for any element with this class will transition to its new property. E.g. adjusting "margin-left" from 0px to 100px will cause a slide to the right; adjusting "background-color" from "red" to "blue" will cause a cool color-change effect. Give it a go!

For browser compatibility, check out caniuse-- transitions. Happy coding!

Upvotes: 0