站内搜索
 
Javascript的3D视觉
时间:2012-09-24  来源:网络  作者:rukki  阅读人数:2200

开门见山讲原理
在平面上要想表现立体感,就是通过不同的移动速度产生远近景深的错觉。
这个特效的核心是通过获取鼠标的坐标(坐标原点是(0,0)为浏览器窗口的左上角),然后以浏览器窗口的某一点为中心坐标来计算偏移量,再设置到需要移动的元素上。onmousemove时不停的计算偏移量,就有了移动的效果。
示意图:(例如浏览器窗口1000*600)

如果某元素的移动范围是左右20px,上下10px,那么鼠标移动到(100,570)时,它就要往左偏16px(-80%*20),往下偏9px(90%*10)。所以如果有3个元素,上下左右的移动范围就不一样,就会有立体的效果。另外远景和近景位移方向相反也是产生3D效果的方法
(赶脚我解释的太罗嗦,可以看【简要demo»»»】代码里的计算过程)
本专题的中心坐标是浏览器窗口的宽65%、高50%处,因为把鼠标当成视角话,那么默认视角是在右侧的。

说到坐标....你知道获取个坐标也有很多方法吗?offsetX、layerX、pageX、clientX、screenX....IE和FF下还都不一样呦,具体请看javascript事件对象 坐标事件说明»,经过各种实验各种折腾,最后我选择了clientX,然后过了很久再看到了《pageX,clientX,offsetX,layerX的那些事》» 结尾那句“只有clientX和screenX 皆大欢喜是W3C标准.其他的,都纠结了.”我有一口血喷出来的赶脚,整出这么多又不兼容又不标准的玩意干嘛...另外搜索的关键词不对也挺坑爹的...

现在来说下本专题
但是这次专题做下来遇到的最大问题不是坐标和IE6(压根没想去兼容IE6,你们懂的),而是我朝的网速。
本来想法是背景上的云也分层,让云有飘的赶脚,但是当zesen辛苦P出来再导成PNG24,立刻傻眼了...400*300的一坨云都能有300K+ Orz..果断飘不了了。最后已经尽力压缩和牺牲特效挂件了但是图片总体积还是高达近800K,就我们平均1.4M的网速,光下载这些无法再压缩图片都要好几秒吧...只好写了个小loading弥补一下等待的焦虑感,但是等待时间还是无法避免的。
想想我们重构同学追求各种极致的优化方法,经常跪求设计师同学少做点阴影渐变,不要做太大的背景图、输出60%品质的jpg,归根结底都是因为网速。阻碍我们工作进步的不光是IE6。。额,跑题了。其实我是想说,如果我们的网速能赶上棒子..的一半,云啊什么的都可以随便飘了— —。

不过在在这组位移的图片中,比较值得分享的是用2张jpg来处理远景和近景的波浪。(近景波浪» ||| 远景») 在颜色相近的情况下,纹路的衔接肉眼看不太出来。感谢zesen和某位厉害的前端工程师的idea,这里不提名字了@@


最后扩展下思路
这种3D视觉在大背景的专题里效果不错,其实也可以运用到页面局部的视觉中,当成一个小小的彩蛋让浏览者自己去发现。
另外如果素材够大,也可以加入滚动鼠标中键让所有景物缩小/变大的特效,这样3D的感觉会更丰富。

虽然网速和IE6什么的经常让人很纠结,但是用js+div+css做出来的效果还是很绚丽的,并且相对于flash更便于前端人员修改。
最后我默默的希望我朝的IE6能更少些,网速更快些;另外如果你看不到这个特效,请果断升级下你的IE吧!

发表评论
 留言列表
首页 上一页 下一页 末页 第1/1页 7条/页 共0条记录

Copyright@2018 新疆企业资源计划管理(ERP)生产力促进中心
新ICP备10002072号  地址:乌鲁木齐市高新北区冬融街53号新疆电子研究所股份有限公司5楼研发中心
邮编:830013  电话:(0991)3137684

 您 是 第  位 访 客