SOURCE

const body = document.querySelector('body');
const totalHeight = document.documentElement.clientHeight;
body.onmousemove = (e) => {
  const start = (e.clientY / totalHeight) * 100;
  const end = start + 10;
  body.style.backgroundImage = `linear-gradient(to bottom, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) ${start}%, rgba(255, 255, 255, 0) ${start}%, rgba(255, 255, 255, 0) ${end}%, rgba(255, 255, 255, 1) ${end}%), url(http://www.bing.com/az/hprichbg/rb/SplitVestibule_ZH-CN14312716793_1920x1080.jpg)`
};

* {
  font-size: 0;
  padding: 0;
  margin: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 10%), url(http://www.bing.com/az/hprichbg/rb/SplitVestibule_ZH-CN14312716793_1920x1080.jpg);
}