<div class="module-jamf" id="module-jamf">
  
  <a href="http://synd.co/2DNywdE" class="jamf-container" id="jamf-container" target="_blank" rel="noopener">
    <div class="jamf-mover" id="jamf-mover">
    </div>
  </a>
  
  <div class="interlude">
    Does your company use Apple devices? <a href="http://synd.co/2DNywdE">Jamf Now</a> can help you set up, manage and protect your iPad, iPhone and Mac devices from anywhere. Manage your first 3 devices for free!
  </div>
  
</div>

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(
    #666,
    #222
  );
}

.module-jamf {
  width: 300px;
  border: 1px solid white;
}

.jamf-container {
  display: block;
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.jamf-mover {
  width: 300px;
  height: 300px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jamf-laptop-screen.png);
  background-size: 800px;
  background-repeat: no-repeat;
  background-position: -30px 40px;
  transform: scale(1);
  transition: background-position 0.25s;
  &.no-more-slidey {
    transition: none;
  }
}
.interlude {
  background: white;
  padding: 1rem;
  font: 12px "Lato";
}

var container = document.querySelector("#jamf-container");
var mover = document.querySelector("#jamf-mover");

container.addEventListener("mousemove", function(e) {
  mover.style.backgroundPositionX = -e.offsetX * 1.8 + "px";
  mover.style.backgroundPositionY = -e.offsetY + 80 + "px";
});

container.addEventListener("mouseenter", function() {
  
  setTimeout(function() {
    mover.classList.add("no-more-slidey");
    container.removeEventListener("mouseenter");
  }, 250);
  
});