質問編集履歴

1 ダウンロードURLを追加

Usagino

Usagino score 10

2018/03/21 15:21  投稿

タイプライタ風ライブラリ「t-js」を使って指定の高さに来たら発火するようにしたい
t-jsというライブラリを使用しています。タイプライタのように表現するjQueryのライブラリです。
[公式サイト](https://mntn-dev.github.io/t.js/)  
すごい使い勝手のよく単純なコードで実装できるので他の皆さんにも紹介したいのですが、それはさておき、このライブラリを使って、指定した高さに来たらタイピングするようにしたいのですがやり方がわかりません
```javascript
jQuery(function($) {
 $(function() {
   $(window).scroll(function(){
     var serecter = $('#target')
     var obj_t_pos = serecter.offset().top;
     var scr_count = serecter.scrollTop() +
     (window.innerHeight/2); // ディスプレイの半分の高さを追加
     if(scr_count > obj_t_pos){
       $('#target').t({
         mistype : true,
         caret : false,
       });
     }
   })
 });
});
```
という風に指定の高さに来たら発火するようにしたのですが動かなかったです。
有識者の方々どうかお力添えをお願いいたします
(実際に使ったコードは下になります)
```html
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>test</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <header>
   <div class="headerbox">
     header
   </div>
 </header>
 <main>
   <div class="wall">
   </div>
   <div id="target">
     <p>Hello world!Hellohellohelloworwor</p>
     <p>Hello world!Hellohellor</p>
     <p>Hello woraaaaaaaaaaaaaaaaaa</p>
   </div>
 </main>
 <footer>
   <div class="footerbox">
   </div>
 </footer>
 <style media="screen">
 </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>
 <script src="t.min.js"></script>
</body>
</html>
```
```css
/* GLOBAL STYLES */
header {
 display: block;
 height: 1000px;
}
.wall{
 height: 20px;
 display: block;
 background-color: black;
}
#target p{
 font-size: 20px;
}
footer {
 display: block;
 height: 1000px;
}
```
  • JavaScript

    24415 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    14184 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    9486 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • jQuery

    9545 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    674 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る