title: how do parallax mouse move effect pure javascript
body: <p>How can I realize a parallax effect like <a href="http://jsfiddle.net/X7UwG/2/" rel="nofollow noreferrer">this example</a>:</p>
  
  <p>but <strong>without</strong> using <code>jQuery</code>, with pure javascript and only with an image?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
    $('#landing-content').mousemove(function(e){
      var x = -(e.pageX + this.offsetLeft) / 20;
      var y = -(e.pageY + this.offsetTop) / 20;
      $(this).css('background-position', x + 'px ' + y + 'px');
    });    
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#landing-content {
   overflow: hidden;
   background-image: url(http://i.imgur.com/F2FPRMd.jpg);
   width: 100%;
   background-size: 150% 150%;
   background-repeat: no-repeat;
   max-height: 500px;
   border-bottom: solid;
   border-bottom-color: #628027;
   border-bottom-width: 5px;
  }
  
  .slider {
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding-top: 200px;
    max-width: 1002px;
  }
  
  .slider img {
   width: 80%;
   padding-left: 10%;
   padding-right: 10%;
   height: auto;
   margin-left: auto;
   margin-right: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="landing-content"&gt;
      &lt;section class="slider"&gt; 
          &lt;img src="http://i.imgur.com/fVWomWz.png"/&gt;
              
      &lt;/section&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Note: like in the example, the element should move smoothly in the mouse direction.</p>