不知道叫啥名字，之前挺流行这种效果，鼠标在页面内移动，背景会跟着鼠标反方向偏移，看起来有种视差的感觉，但感觉又不像。
大概如下效果吧。
基本代码如下：
- var div = document.querySelector(‘.testItem’);
- var w,h;
- var pagex,pagey;
- setInterval(function(){
- w = document.documentElement.clientWidth,
- h = document.documentElement.clientHeight;
- var l = parseInt(getstyle(div,’left’));
- var t = parseInt(getstyle(div,’top’));
- div.style[‘left’] = l+(-pagex/5 – l)*.05+’px’;
- div.style[‘top’] = t+(-pagey/5 – t)*.05+’px’;
- },13);
- function getstyle(obj,name){
- if(obj.currentStyle){
- return obj.currentStyle[name];
- }else{
- return getComputedStyle(obj,null)[name];
- };
- };
- window.addEventListener(‘mousemove’,function(ev){
- pagex = ev.clientX-w/2;
- pagey = ev.clientY-h/2;
- },false);
其实还有更简单的，mousemove的时候，直接改变坐标位置，这样做唯一的缺点就是离开窗口，从另一个地方进入的话，会突然跳过去，而不是已动画的时候滑动过去，个人感觉不习惯。
然后，造轮子开始，尝试简单的封装一下，下面是调用方法：
- //调用方法
- parallax(‘.item’).init()
- //后面的json里面的range是控制鼠标的触发范围，这样鼠标只有在这里mousemove才会有效果。不写，默认整个页面mousemove都有效果。
- parallax(‘.item’).init({
- range : ‘.paraWrap’
- });
- //如果想每个元素偏移的距离不同，配置data-scale的参数就可以了，如果想随着鼠标相同的方向偏移，配置data-type为true即可，不写默认反方向：
- <div class=“Item” data-scale=‘6’ data-type=‘true’></div>
看个例子，这样的：
还有这样的：
DELICIOUS
COOKIES
只是简单的封装了一下，如果不符合自己的效果，可自己下面代码修改。
😮 😉 😎 rqdsaDSA工球棒工载城城脸色甘发大水放大