インターコード雑用担当の下っ端です。

この記事を開いて「お？」と思った方もいらっしゃったかと思いますが、
見出しにタイプライター風アニメーションjQueryのt-jsを使っています。
使い方などは、色々なサイトでされているので割愛させていただきます。
t.js配布ページはこちら※2021年6月現在削除されております。

このt-jsは簡単に使える反面、使う箇所によっては問題があります。

ページ開いたときに問答無用で実行してしまう為、まだ見えていない要素もt-jsが実行してしまい見えた頃にはタイプライター風アニメーションが終わってしまいます。
この問題点を解決するには、
指定の箇所までスクロールされたら実行する記述をしてあげる必要があります。

簡単に書くならこんな感じになります。

$(window).on('load scroll', function (e){
  var tjs = $("#block01").offset().top;
  var scroll = $(window).scrollTop();
    if(scroll > tjs){
       $("#block01 .title").t({speed:75,speed_vary:true}); $(this).off(e);
    }
});

idのblock01がウィンドウの一番上まで行ったら　t-js　を実行するざっくりした書き方です。
以下実行例です。

と、まあこんな感じになるわけですが、
ここで新たな問題が出てきましたね。

t-js　が指定位置まで動いていないからタイプライター風アニメーションで見せたいテキストが見えてしまっています。

どうするか？
消してしまいましょう。

ここからは応用というか　t-js　で配布されているt.min.jsに変更を加える必要があります。
変更は以下の通り。

b.css({overflow:"hidden"}))

↑を↓のように変更

b.css({overflow:"hidden",display:"none"}))

と同時に、見せたくない箇所に　display:none　してあげましょう。

そうすると？どうなるか。
こうなります。

簡単ですね。ぜひご参考あれ！