将视差添加到div中的一个img

Question

我正在尝试为div中的1张图片添加视差效果，就像漂浮在Apple网站上的iPhone一样。我认为它是视差效应。

所以这是标记。没什么特别的，我的第一个视差......

var ypos, image;

function parallax() {
  image = document.getElementById('image');
  ypos = window.pageYOffset;
  image.style.top = ypos * -1 + 'px';
}
window.addEventListener('scroll', parallax);

   * {
     margin: 0;
     padding: 0;
     font-family: Lucida Grande;
   }
   h1 {
     font-weight: 500;
     text-align: center;
     margin: 15px 0;
   }
   p {
     font-size: 23px;
     font-weight: 100;
   }
   body,
   html {
     min-height: 100%;
     width: 100%;
   }
   .intro {
     background-color: #e8e1d7;
     max-height: 700px;
     overflow: auto;
     z-index: -1;
     overflow-y: hidden;
   }
   .left {
     float: left;
     width: 60%;
     z-index: 1;
     padding: 100px 140px;
     box-sizing: border-box;
   }
   .intro .img {
     float: left;
     width: 40%;
   }
   .intro .img img {
     z-index: 1;
     bottom: -200px;
     position: relative;
     height: 500px;
   }
   .next {
     background-color: white;
     z-index: 1;
     position: relative;
     height: 790px;
   }

<div class="intro">
  <div class="left">
    <h1>This is iPhone 5</h1>
    <p>here we present you world's most advanced piece of technology ever! all the iphones come in standard silver and black (space grey color). The 8 MP camera makes shooting photos more vibrant! have a look to our new phone at your nearest apple store
      now!</p>
  </div>
  <div class="img">
    <img src="http://pngimg.com/upload/iphone_PNG5736.png" id="image" />
  </div>
</div>
<div class="next">

</div>

请在整页视图中查看代码段