HTML
JavaScript
jQuery
アニメーション

【質問】webサイトにタイプライタのような効果を加えたい【大募集】

バラバラにならないようにするにはどうしたらいいのか

こんにちわ、普段は学生をしているusaginonikuです。

趣味でサイトを作っている時に大きな壁にぶち当たりました。

指定の高さに来たら文字をタイプライタのように表示させたいのですが

circleanimationmuvie

なぜかこうなってしまいます!

どなたか...スクロールしてもバラバラにならないようにするにはどうしたらいいのか教えてください。。。

よろしくお願いします

index.html
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>test</title>
  </head>
  <body>
    <header>
      <div class="headerbox">
        header
      </div>
    </header>

    <main>
      <div class="mainbox">
        <p class="split">テストテストテストテストテストテストテストテストテストテストテストテストテスト</p>
      </div>
    </main>
    <footer>
      <div class="footerbox">
      </div>
    </footer>
    <style media="screen">
      header{
        display: block;
        height: 1000px;
      }
      .split{
        font-size: 30px;
      }
      footer{
        display: block;
        height: 1000px;
      }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

script.js
jQuery(function($) {
// ---------------------------------------------------------------------------

    function fadein_type(setElm,delaySpeed,object_pass){
      var setElm = $(setElm),
        fadeSpeed = 0;

      var textlength = delaySpeed * $(setElm).text().length;

      setElm.css({
        visibility: 'visible'
      }).children().addBack().contents().each(function() {
        var elmThis = $(this);
        if (this.nodeType == 3) {
          var $this = $(this);
          $this.replaceWith($this.text().replace(/(\S)/g, '<span class="textSplitLoad">$&</span>'));
        }
      });

      $(window).scroll(function(){
         var obj_t_pos = $(object_pass).offset().top;
         var scr_count = $(document).scrollTop() + (window.innerHeight/2); // ディスプレイの半分の高さを追加
         var count = 0

         if(scr_count > obj_t_pos){

             splitLength = $('.textSplitLoad').length;
             setElm.find('.textSplitLoad').each(function(i) {
               splitThis = $(this);
               splitTxt = splitThis.text();
               splitThis.delay(i * (delaySpeed))
                 .css({
                   display: 'inline-block',
                   opacity: '0'
                 })
                 .animate({
                   opacity: '1'
                 }, fadeSpeed);
             });
             setTimeout(function() {
               setElm.html(setText);
             }, splitLength * delaySpeed + fadeSpeed);


         }
      })
    }

    fadein_type('.split',40,'.mainbox');

    // ---------------------------------------------------------------------------
});