如何使用 javascript 制作动画网站

Question

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.

Answer 1

Here's the rulebook: http://api.jquery.com/animate

Here's the playground: http://jsfiddle.net

Have fun.

Answer 2

jQuery is the best framework to use as a base. It handles all the cross-browser idiosyncrasies.

Check out jQuery UI.

http://jqueryui.com/demos/

Answer 3

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. Eg 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!

Answer 4

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 .

Answer 5

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