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; |
| } |
| ``` |
