BLOG

ブログ

不まじめなことも書いています。

タイプライター風アニメーションを導入できるjQuery t-jsで一工夫

2017.03.31

subordinate

これを書いたのは下っ端です。

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

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

この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 してあげましょう。

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

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

BLOGを見る