title: Parallax scrolling effect, start at certain percentage on page?
body: <p>I am using this script to create a parallax scroll effect on my page:</p>
  
  <pre><code>$(window).scroll(function (e) {
      parallax();
  });
  
  function parallax() {
      var scrolled = $(window).scrollTop();
      $('.cloud1').css('top', - (scrolled * 0.1) + '%');
      $('.cloud2').css('top', - (scrolled * 0.3) + '%');
      $('.cloud3').css('top', - (scrolled * 0.2) + '%');
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="cloud1"&gt;&lt;/div&gt;
  &lt;div class="cloud2"&gt;&lt;/div&gt;
  &lt;div class="cloud3"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong> (same for <code>.cloud2</code> and <code>.cloud3</code> but with different background image, opacity and 'top' 'left'):</p>
  
  <pre><code>.cloud1 {
     background: url(../images/cloud1.png) no-repeat;
     opacity: 0.9;
     position: fixed;
     width: 100%;
     height: 100%;
     top: 50%;
     left: 20%;
     z-index: 1;
  }
  </code></pre>
  
  <p>When the script begins (on scroll) the <strong>HTML</strong> changes to this:</p>
  
  <pre><code>&lt;div class="cloud1" style="top: 0%; "&gt;&lt;/div&gt;
  </code></pre>
  
  <p>which makes the 'cloud' jump to the top of the page, and then the parallax starts (which you can see for a very short period of time as it's already jumped to the top of the page)</p>
  
  <p>Is there a way to set the <code>style="top: 0%;"</code> to start at say 20% when the parallax begins, and then begin to multiply by 0.1?</p>
  
  <p>Here is a codepen of the problem : <a href="http://codepen.io/anon/pen/tkfDH" rel="nofollow">http://codepen.io/anon/pen/tkfDH</a></p>
  
  <p>Hopefully this is clear, </p>
  
  <p>Any help is appreciated</p>
  
  <p>Jon</p>