D3 Examples - iPhone 6S X-ray

xxxxxxxxxx
 
<!doctype html>
<html><head>
  <meta charset="utf-8">
  <title>iPhone 6S X-ray</title>
  <style>
    #xray {
      top: -4px;
      left: -5px;
      position: absolute;
      mouse-events: none;
      text-decoration: none;
      display: block;
      opacity: 0;
    }
​
    body {
      background: url("https://d3nevzfk7ii3be.cloudfront.net/igi/ZxuRyRNpFBbInAUA.huge") no-repeat;
      margin: 0;
    }
​
    p {
      z-index: 1;
      position: absolute;
      text-align: center;
      width: 500px;
      left: 559px;
      top: 0;
    }
  </style>
</head><body>
  <div id="xray">
    <img src="https://d3nevzfk7ii3be.cloudfront.net/igi/jTPTpGsvsEFYWowb.huge" alt="x-ray image" width="1612" height="1209">
  </div>
  <p>
    (iPhone 6S images courtesy of
    <a href="https://www.ifixit.com/Teardown/iPhone+6s+Teardown/48170">iFixIt</a>
    and <a href="https://www.creativeelectron.com/">Creative Electron</a>)
  </p>
  <script>
    var xray = document.getElementById('xray');
    document.body.addEventListener('mousemove', function(e) {
      var w = 500, x0 = 560, x = e.screenX - window.screenX;
      xray.style.opacity = Math.max(0, Math.min(x - x0, w) / w);
    });
  </script>
</body></html>
​
    