タイプライタ風ライブラリ「t-js」を使って指定の高さに来たら発火するようにしたい

t-jsというライブラリを使用しています。タイプライタのように表現するjQueryのライブラリです。
公式サイト

すごい使い勝手のよく単純なコードで実装できるので他の皆さんにも紹介したいのですが、それはさておき、このライブラリを使って、指定した高さに来たらタイピングするようにしたいのですがやり方がわかりません

javascript
1jQuery(function($) {
2  $(function() {
3    $(window).scroll(function(){
4      var serecter = $('#target')
5      var obj_t_pos = serecter.offset().top;
6      var scr_count = serecter.scrollTop() +
7      (window.innerHeight/2); // ディスプレイの半分の高さを追加
8      if(scr_count > obj_t_pos){
9        $('#target').t({
10          mistype : true,
11          caret : false,
12        });
13      }
14    })
15  });
16});
17

という風に指定の高さに来たら発火するようにしたのですが動かなかったです。

有識者の方々どうかお力添えをお願いいたします

（実際に使ったコードは下になります）

html
1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="utf-8">
6  <title>test</title>
7  <link rel="stylesheet" href="style.css">
8</head>
9
10<body>
11  <header>
12    <div class="headerbox">
13      header
14    </div>
15  </header>
16
17  <main>
18    <div class="wall">
19
20    </div>
21    <div id="target">
22      <p>Hello world!Hellohellohelloworwor</p>
23      <p>Hello world!Hellohellor</p>
24      <p>Hello woraaaaaaaaaaaaaaaaaa</p>
25    </div>
26  </main>
27  <footer>
28    <div class="footerbox">
29    </div>
30  </footer>
31  <style media="screen">
32  </style>
33  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
34  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
35  <script src="script.js"></script>
36  <script src="t.min.js"></script>
37
38
39</body>
40
41</html>
42
43

css
1/* GLOBAL STYLES */
2header {
3  display: block;
4  height: 1000px;
5}
6.wall{
7  height: 20px;
8  display: block;
9  background-color: black;
10}
11#target p{
12  font-size: 20px;
13}
14
15
16footer {
17  display: block;
18  height: 1000px;
19}
20

kei344

2018/03/21 06:18

プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）

Usagino

2018/03/21 06:20

リプライありがとうございます。確かにそうですね。追記しておきます

行動規範の内容に同意します

回答2件

IntersectionObserverを使い, 「基準となるノードがスクリーンに入ったらアニメーションを開始する」ようにしたら如何でしょうか?

参考
https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API

投稿2018/03/21 06:43

defghi1977

総合スコア4756

serecter.scrollTop() は $('#target') で指定しているようそのスクロール量を返すので、ずっと0です。
開発者ツールで値を確認してみてください。

【Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 - エンジニアHub｜若手Webエンジニアのキャリアを考える！】
https://employment.en-japan.com/engineerhub/entry/2017/05/30/110000

【JavascriptのChromeでのデバッグ方法個人的まとめ2016 - Qiita】
http://qiita.com/snoguchi/items/8f6bb62a3166eca23ac3

投稿2018/03/21 06:35

kei344

総合スコア69398