See https://leader22.github.io/type-write.js/
上記のデモと同じファイルがindex.htmlなので、そっち見るほうがはやいかも。
var typeWrite = new TypeWrite({
textElm: outputElm
});
typeWrite.start(targetText, {
talkDelay: 0.05
}, callback);あのイーハトーヴォのすきとおった風、{|}
夏でも底に冷たさをもつ{<blue}青い{>}そら、{|}
うつくしい{<green}森{>}で飾られたモリーオ市、郊外のぎらぎらひかる草の{<italic blue}波{>}。
という文字は、以下のHTMLとして出力されます。
あのイーハトーヴォのすきとおった風、<br>
夏でも底に冷たさをもつ<span class="blue">青</span><span class="blue">い</span>そら、<br>
うつくしい<span class="green">森</span>で飾られたモリーオ市、郊外のぎらぎらひかる草の<span class="italic blue">波</span>。※見やすさのために改行してます。
- 言わずもがな、事前にCSSの定義が必要です
{}のネストはできません
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent