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

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

代码示例

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的原因，第一次进入首页的时候是没问题的，但是浏览了其他页面，再跳转回首页的时候，又失效了...
有知道的大佬希望能够指教指教~