如何使用 javascript 制作动画网站答案

【问题标题】：How to make animated websites with javascript如何使用 javascript 制作动画网站
【发布时间】：2011-07-23 02:32:51
【问题描述】：

我见过一些非常酷的网站，这些网站都是用 javascript 制作的。谷歌已经做了一些动画互动标志，this 网站也用 javascript 动画（不是很清楚的 flash 位）。

那么怎么做呢？是否有一些人们使用的工具、框架等？我只知道jquery。

【问题讨论】：

查看<canvas> 标记以获取非 Flash 动画。 stackoverflow.com/questions/2704703/…

标签： javascript jquery

【解决方案1】：

这是规则手册：http://api.jquery.com/animate

这里是游乐场：http://jsfiddle.net

玩得开心。

【讨论】：

【解决方案2】：

jQuery 是用作基础的最佳框架。它处理所有跨浏览器的特性。

查看 jQuery UI。

http://jqueryui.com/demos/

【讨论】：

【解决方案3】：

如果您的受众较新，您还应该考虑 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;
 }

更改具有此类的任何元素的样式属性将转换到其新属性。例如。将“margin-left”从 0px 调整为 100px 将导致向右滑动；将“background-color”从“red”调整为“blue”会产生很酷的变色效果。试一试！

有关浏览器兼容性，请查看caniuse-- transitions。编码愉快！

【讨论】：

【解决方案4】：

如果您更喜欢矢量图形，我更喜欢将 SVG 用于交互式图形。我建议使用 Adobe Illustrator 或类似的工具来生成图形，然后使用 Raphael 对其进行动画处理。如果您想要一个非常好的介绍，请选择非常好的PeepCode Episode。

【讨论】：

【解决方案5】：

从查看他们的源代码来看，volll 似乎使用 javascript 推出了他们自己的动画方法。

如果您想在自己的网站上制作图形动画，我建议您查看 HTML5 画布标签。 https://developer.mozilla.org/en/Canvas_tutorial

【讨论】：