网易“许愿墙”动画设计制作

作者:林炜贤来源:www.163css.com发表时间:(2010-12-18)

这个动画是在网易的世博栏目找到的,网易用它来作为世博的祝福,用户可以输入用户名及祝福语,相应的在“许愿墙”就会出现你的祝福了。“许愿墙”的特色就是可以拖动,当然了,网易公司设计得非常完美,加了墙的背景,加上一个红色的钉子,挺有意思的。

去年,为了给东莞汽配公司做一个一周年的专题,我也搞过一个“许愿墙”,除了拖动及填写祝福语功能,但总有一点遗憾,祝福语拖动可以在整个页面中随意拉动,没办法限制在区域内。

网易的这个“许愿墙”通过确定移动区域,限制了拖动范围,实在不错。var wallBorder = {x : 783,y : 171};通过预先定义“许愿墙”的最宽度和高度实现范围控制,实在高明,呵呵。

当然,值得一提的是数据是写在脚本里的,比我去年做的那个“许愿墙”复杂多了。网易还增加了关闭按钮,想得够全面了。。。

以下是我制作的效果截图:

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.com/hihilinxuan/cssjs/201012/163xyq/index.html

下载地址:网易“许愿墙”动画设计制作.rar

返回作者主页:www.163css.com阅读 (10775)
更多 1