title: Animating Text with parallax background
body: <p>I'm all new to this and I have this site that I'm using to learn the basics. I'm just put together a simple parallax scrolling effect, where the header is scrolling and contains one H1 element. </p>
  
  <p>I've been trying to figure out if it's possible to put some scrolling animation on the text so the text behaves similar to the images in this video from DevTips: <a href="https://www.youtube.com/watch?v=WTZpNAbz3jg&amp;feature=player_detailpage" rel="nofollow">https://www.youtube.com/watch?v=WTZpNAbz3jg&amp;feature=player_detailpage</a></p>
  
  <p>I did try to put some jQuery together to target the H1 and use same technique as shown in the video, but it didn't work. Maybe my code is all wrong because the test he does where the scroll position is printed out in the console did not show for me.</p>
  
  <p>Here's the html and css code that I'm working with. Unfortunately I can't add screenshots since I'm new here and lacking points.</p>
  
  <p>Thanks a bunch!</p>
  
  <p><strong>Html</strong></p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Parallax&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="masthead"&gt;
          &lt;h1&gt;Some Text&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div class="page"&gt;&lt;/div&gt;
  
      &lt;script src="jquery-2.1.3.js"&gt;&lt;/script&gt;
      &lt;script src="function.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>*, *::before, *::after {
    box-sizing: border-box;
    margin: 0px;
  }
  
  html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
  }
  
  body {
    overflow-y: auto;
    font-size: 120%;
    perspective: 1px;
    transform-style: preserve-3d;
  }
  
  h1 {
    color: #fff;
    font-size: 300%;
    text-align: center;
    padding-top: 200px;
  }
  
  .page {
    padding: 20px 20%;
    position: relative;
    top: 60%;
    background-color: #fff;
    height: 900px;
  }
  
  .masthead {
    position: absolute;
    background: url("000017.jpg");
    width: 100%;
    height: 60%;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 50% 50%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: cover;
    transform: translateZ(-0.9px) scale(1.9);
    z-index: -900;
    top: -20%;
  }
  </code></pre>