给首页加上图片随鼠标移动的“视差”效果

给首页加上图片随鼠标移动的“视差”效果

咕咕咕太久了得水一篇才行了...
之前就很想给封面做这个随着鼠标移动的“视差”效果,一直没空弄,今天心血来潮就尝试下~
代码之前不知道在哪里扒过来的=。= 然后一直存着,今天拿过来改了改,感觉效果还是不错滴~

### 效果 效果如下~ 看起来不错吧~

代码示例

HTML代码

<div class="my-bg" style="
height: 50vh;
background-image:url(https://yingserver.cn/open/acgimg/acgurl.php);
background-size: cover;"></div>

js代码
还是比较简单易懂的,主要就是不停地监听鼠标位置并且修改backgroundPosition来实现的

// background根据自己实际情况选取
var background = document.getElementsByClassName("my-bg")[0];
var range = 40;
var calcValue = function calcValue(a, b) {
	return (a / b * range - range / 2).toFixed(1);
};
var timeout = void 0;
document.addEventListener('mousemove',
function(_ref) {
	var x = _ref.x,
	y = _ref.y;
	if (timeout) {
		window.cancelAnimationFrame(timeout);
	}
	timeout = window.requestAnimationFrame(function() {
		var yValue = calcValue(y, window.innerHeight);
		var xValue = calcValue(x, window.innerWidth);
		console.log(xValue, yValue);
                // xValue和yValue可以根据实际情况调,我这里y-50了
		background.style.backgroundPosition = xValue * .45 + "px " + (-yValue * .45 - 50) + "px";
	})
},false);

改进(求助)

1.发现没有,当鼠标挪到div边缘的时候,另一边的图片已经过界出现重复的图了,想解决的话,目前只想到两个办法:一是缩放图片,放大一点点,但是background-size我设置了cover,也不想改成别的,似乎没法改;二是不知道能不能把图片边缘模糊化,如box-shadow:0 0 50px 30px #ffffff inset;但是效果不太好...本菜鸡表示很难受...
2.可能是pajx的原因,第一次进入首页的时候是没问题的,但是浏览了其他页面,再跳转回首页的时候,又失效了...
有知道的大佬希望能够指教指教~