文字を打ち込むような動きのサイトを作りたい

Question

初めての投稿になります。

こちらのサイトで最初に左側に出てくる、英字を打ち込む様な動作のサイトを作成したいです。
(フラッシュは使わずに)

いろいろネットで見ていて

http://www.allinthemind.org/

まずは、このサイトでどうゆうやり方なのか、調べたいのですが、
要素の検証をすると、左側の部分もなぜか消えてしまいます。
何かアドバイス頂ける方いたら教えていただけると幸いです。

Comments

[Lhankor_Mhy]

このソースは見ました？ http://www.allinthemind.org/js/proceed.js

[non777]

さっそくの回答ありがとうございます。jsのソースはあまり見ていません、正直、jQuery使う程度しかjsの理解はありません。何かわかることがあればざっくりでも教えて頂けたら幸いです。

[Lhankor_Mhy]

そのソース中のrollLetterがそうだと思います。下の方で実際に使用してますから、そちらを見れば使用法がわかるかと思います。ただ、ライセンスが書いていないので自サイトに組み込むなら作者に連絡をした方がいいと思います。

[non777]

ありがとうございます。いろいろ見て実際使う場合は作者に連絡してみます。
ちなみに、クロームで要素の検証をすると、topの左側が消えてしまうのですが、原因ってわかりますでしょうか？

[Lhankor_Mhy]

スクリプトで制御してるっぽいですが、右上のメニューからundockして別ウィンドウで表示すればいいと思います。

[non777]

助かりました。ありがとうございます。後は自分で調べてみます。

Answer 1

テキストノードは data プロパティで参照できます。

• Edit fiddle - JSFiddle
• Edit fiddle - JSFiddle (2015/11/17 21:48追記。CharacterData#appendData 版。)

(2015/11/17 21:00追記)
TEXT_NODE は CharacterData をプロトタイプに持つ為、Interface CharacterData のプロパティ、メソッドを全て使えます。

• CharacterData - Web APIs | MDN
• 4.9. インタフェース CharacterData - DOM Standard 日本語訳

Re: non777 さん

Comments

[non777]

回答ありがとうございます。一瞬でこれだけ作れるのすごいです。
入力し続けるだけでなく、一度文字を消したりして、またその文字を入力する的なものを作りたいのですが、その場合のアドバイスありましたら頂きたいです。

[think49]

textNode.data = ''; で消せます。
また、TEXT_NODE は CharacterData をプロトタイプに持つ為、Interface CharacterData のプロパティ、メソッドを全て使えます。
http://www.hcn.zaq.ne.jp/___/WEB/DOM4-ja.html#interface-characterdata
https://developer.mozilla.org/en-US/docs/Web/API/CharacterData