title: jQuery - Text and Image scrolling effects are not working
body: <p><a href="http://honghanhdinh.com/" rel="nofollow">http://honghanhdinh.com/</a></p>
  
  <p>I am currently developing my website and I am running into some troubles with some of the parallax tutorials I am learning. </p>
  
  <p>As you can see, the plane and the words to my name "Hong" appears on on the opening page but the other 2 parts of my name "Hanh Dinh" only appears when beginning to scroll down. In addition, the plane also disappears upon scrolling and flys out from the right to the left.</p>
  
  <p>I don't want the plane to appear upon entering the website but for it to naturally slide out to the left when scrolling down. I also want my full name "Hong Hanh Dinh" to appear upon entering the website--not just the Hong part.</p>
  
  <p>I've tried many things to fix it but I think I'm missing something.</p>
  
  <p>Here is the beginning of HTML code:</p>
  
  <pre><code>  &lt;BODY&gt;
  
    &lt;!--Begin about info--!&gt;
  
    &lt;MAIN&gt;
  
    &lt;section id="bg" data-speed="10" data-type="background"&gt;
    &lt;div id="plane"&gt;
    &lt;img src="http://www.locanto.info/classifieds/images/airplane.png"&gt;
    &lt;/div&gt;
  
  
    &lt;div id="parallax2"&gt;
    &lt;h2 id="center" class="parallax2"&gt;Hong&lt;/h2&gt;
    &lt;h2 id="left" class="parallax2"&gt;Hanh&lt;/h2&gt;
    &lt;h2 id="right" class="parallax2"&gt;Dinh&lt;/h2&gt;
    &lt;/div&gt;
    &lt;/section&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>  #bg {
    background-color: #FFFFFF;
    background-size
    }
  
    #parallax2 {
    height: 800px;
    margin-bottom: 600px;
    overflow: hidden;
    padding-top: 200px;
    }
  
    /* Parallax Scrolling text */
  
    #center.parallax2 {
    font-size: 175px;
    color: #CC3333;
    opacity: 0.5;
    text-align: center;
    left: 200px;
    padding: 0;
    position: relative;
    bottom: 100px;
    }
  
  
    #left.parallax2 {
    color: #336699;
    font-size: 200px;
    text-align: left;
    left: 400px;
    opacity: 0.75;
    overflow: hidden;
    position: relative;
    }
  
  
    #right.parallax2 {
    color: #C5C3DE;
    font-size: 250px;
    text-align: right;
    opacity: 0.5;
    overflow: hidden;
    position: relative;
    width: 1200px;
    bottom: -300px;
    }
  </code></pre>
  
  <p>This is the jQuery for the "Hong Hanh Dinh" scrolling:</p>
  
  <pre><code>  $(document).ready(function() {
    var controller = $.superscrollorama();
    controller.addTween(
      '#parallax2', 
      (new TimelineLite()).append([
      TweenMax.fromTo($('#left.parallax2'), 1, {
      css: {
          top: 200
      },
      immediateRender: true
    }, {
      css: {
          top: -900
      }
    }),
      TweenMax.fromTo($('#right.parallax2'), 1, {
      css: {
          top: 500
      },
      immediateRender: true
    }, {
      css: {
          top: -1800
      }
    })
      ]), 1000 // scroll duration of tween
    );
  
    });
  </code></pre>
  
  <p>This is the jQuery for the flying plane:</p>
  
  <pre><code>  $(document).ready(function() {
    $(window).scroll(function() {
      console.log($(this).scrollTop());
    $('#plane').css({
      'width': $(this).scrollTop(),
      'height': $(this).scrollTop()
    });
    });
    });
  </code></pre>
  
  <p>Please let me know if my error is in the CSS or in the jQuery. Thank you!</p>