<div class="page-container">
    <div class="page-back"></div>
  </div>

* {
  margin: 0;
  padding: 0;
}

.page-container {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #fff;
}

.page-back {
  position: absolute;
  width: 120%;
  height: 120%;

  left: -10%;
  top: -10%;

  background-image: url(https://images.unsplash.com/photo-1488866022504-f2584929ca5f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1462&q=80);
  background-size: cover;
  background-position: center;
}



var pageContainer = document.querySelector('.page-container');
var pageBack = document.querySelector('.page-back');

// 눈에 보이는 브라우저의 안쪽 값
var windowWidth = window.innerWidth; 
var windowHeight = window.innerHeight; 


pageContainer.addEventListener("mousemove", function(e) {

  // console.log("pageX", e.pageX);
  // console.log("pageY", e.pageY);

  // 브라우저를 상하좌우로 반씩 나누어 
  // 마우스 위치에 따라 음수/양수의 작은 수로 만듦
  var moveX = ((windowWidth / 2) - e.pageX) * 0.1;
  var moveY = ((windowHeight / 2) - e.pageY) * 0.1;

  // console.log('moveX', moveX);
  // console.log('moveY', moveY);

  // 위에서 만든 수를 
  // 1) margin값으로 활용하여 이미지 무브
  // pageBack.style.marginLeft = `${moveX}px` // moveX + "px";
  // pageBack.style.marginTop = `${moveX}px` // moveY + "px";

  // 2) transform 활용 (속도 면에서 더 나아 추천)
  pageBack.style.transform = `translate(${moveX}px, ${moveY}px`;

})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.