<div class="site-wrap">
  <div class="devices">
    <div class="desktop">
      <div class="screenshot"></div>
      <div class="device"></div>
    </div>
    <div class="tablet">
      <div class="screenshot"></div>
      <div class="device"></div>
    </div>
    <div class="phone">
      <div class="screenshot"></div>
      <div class="device"></div>
    </div>
  </div>
</div>

.site-wrap {
background: #eacda3; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #eacda3 , #d6ae7b); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #eacda3 , #d6ae7b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
padding: 200px 0 500px 0;
}

.devices {
  padding-bottom: 45.07125%;
  position: relative;
  width: 87.5%;
}

.devices .device,
.devices .screenshot {
  background-repeat: no-repeat;
  background-size: 100%;
  transition: background-position .6s ease-out;
}

.devices > div,
.devices .device,
.devices .screenshot {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.devices .desktop .screenshot {
  background-image: url(https://drive.google.com/uc?id=0BxTcJ0W3FLSydUFyMWVIZnRHTE0);
  height: 90%;
  left: 11.5%;
  top: 5%;
  width: 68%;
}

.devices .desktop .device {
  background-image: url(https://drive.google.com/uc?id=0BxTcJ0W3FLSyc3lOVkU0cHJCNXM);
}

.devices .tablet .screenshot {
  background-image: url(https://drive.google.com/uc?id=0BxTcJ0W3FLSyYzk4NVFuQ21pZzg);
  height: 76%;
  left: 61.5%;
  top: 12.6%;
  width: 30%;
}

.devices .tablet .device {
  background-image: url(https://drive.google.com/uc?id=0BxTcJ0W3FLSyYTljVC1KbnpsaG8);
}

.devices .phone .screenshot {
  background-image: url(https://drive.google.com/uc?id=0BxTcJ0W3FLSycDdZdnF3RjVCU2c);
  background-position: 0 100%;
  bottom: 10%;
  height: 43%;
  left: auto;
  right: 2%;
  top: auto;
  width: 12.5%;
}

.devices .phone .device {
  background-image: url(https://drive.google.com/uc?id=0BxTcJ0W3FLSyUWZhMUp1Tlc4YXM);
}


@media (max-width: 980px) {
  .site-wrap {
    background-position: 80% top;
  }
  .devices {
    padding-bottom: 51.51%;
    width: 100%;
  }
}

$(window).bind("load resize scroll", function(e) {
  var y = $(window).scrollTop();

  $(".tablet .screenshot").filter(function() {
    return $(this).offset().top < (y + $(window).height()) &&
      $(this).offset().top + $(this).height() > y;
  }).css('background-position', '0px ' + parseInt(-y / 2) + 'px');
  $(".phone .screenshot").filter(function() {
    return $(this).offset().top < (y + $(window).height()) &&
      $(this).offset().top + $(this).height() > y;
  }).css('background-position', '0px ' + parseInt(-y / 1) + 'px');
  $(".desktop .screenshot").filter(function() {
    return $(this).offset().top < (y + $(window).height()) &&
      $(this).offset().top + $(this).height() > y;
  }).css('background-position', '0px ' + parseInt(-y / 3) + 'px');
});