Background move JS

vanilla js backgroundImage movement

by Lio Fleishman

HTML

<div id="top-image"></div>

SCSS

#top-image {
  background: url('https://d3ui957tjb5bqd.cloudfront.net/images/screenshots/products/0/8/8905/red-rocks-park-o.jpg') -25px -50px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 0;
  height: 100%;
  background-size: calc(100% + 50px);
}

JavaScript

(function() {

  var topImage = document.getElementById('top-image'),
    movementStrength = 50,
    wh = window.innerHeight,
    ww = window.innerWidth,
    height = movementStrength / wh,
    width = movementStrength / ww;

  var moveIt = function(e) {
    var pageX = e.pageX - (ww / 2),
      pageY = e.pageY - (wh / 2),
      newvalueX = width * pageX * -1 - 25,
      newvalueY = height * pageY * -1 - 50;
    topImage.style.backgroundPosition = newvalueX + "px" + newvalueY + "px";
  };

  topImage.addEventListener("mousemove", moveIt);

})();