随着鼠标位移的动画效果实现

1.纯JS实现


[demo]
这种方式需要已知宽度和高度。从而得出这片区域的中心点。
设可以移动区域为m,所有最大可以位移的值为m,意味着,当鼠标在离中心点最远的地方的时候,刚好对应的位移是m。设中心点为(x,y),鼠标所在的点为(xP,yP),通过xP-x,yP-y即为最远的点。所以上面有

xP=(x-500)/500;
yP=(y-250)/250;  

通过除以中心点的值得到百分比。当百分比为100%的时候,即是最远的点。而后面的(350+xP*20)中的350是本身这个DIV的left

2.JS库 - parallax.js


参考文章:
[Javascript的3D视觉-TGideas-腾讯游戏官方设计团队]

你可能感兴趣的:(随着鼠标位移的动画效果实现)