文字を見せる
タイプライターTypewriter
1文字ずつ、打ち込むように現れる。
AIへの指示例上の調整が入ります
スライド用（PowerPoint・Canva を操作するAIに）説明の文は、1文字ずつ打ち込むように表示してください（タイプライター）。1文字あたり0.08秒、全体で1.12秒ほどにしてください。
動画用（動画を作るAIや編集の依頼に）テロップを1文字ずつ0.08秒間隔で表示してください（タイプライター）。各文字はパッと表示します。
細かい指定動画を作る人・細かく指示したい人向け
- 1文字の間隔
- 0.08秒
- 全体の長さ
- 約1.12秒（14文字）
- 1文字の出かた
- パッと（0秒）
HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます
ページを開いたときに1回動きます。画面に入ったときに動かしたいときは、スクロールで現れるの JavaScript と組み合わせます。
<p class="fb-typewriter"><span>会</span><span>議</span><span>の</span><span>要</span><span>点</span><span>を</span><span>三</span><span>行</span><span>で</span><span>ま</span><span>と</span><span>め</span><span>ま</span><span>す</span></p>
<style>
/* 1文字ずつ span に分け、0.08秒ずつ遅らせて出す */
.fb-typewriter span {
animation: fb-type-in 0.01s steps(1) both; /* 1文字をパッと出す */
}
.fb-typewriter span:nth-child(2) { animation-delay: 0.08s; }
.fb-typewriter span:nth-child(3) { animation-delay: 0.16s; }
.fb-typewriter span:nth-child(4) { animation-delay: 0.24s; }
.fb-typewriter span:nth-child(5) { animation-delay: 0.32s; }
.fb-typewriter span:nth-child(6) { animation-delay: 0.4s; }
.fb-typewriter span:nth-child(7) { animation-delay: 0.48s; }
.fb-typewriter span:nth-child(8) { animation-delay: 0.56s; }
.fb-typewriter span:nth-child(9) { animation-delay: 0.64s; }
.fb-typewriter span:nth-child(10) { animation-delay: 0.72s; }
.fb-typewriter span:nth-child(11) { animation-delay: 0.8s; }
.fb-typewriter span:nth-child(12) { animation-delay: 0.88s; }
.fb-typewriter span:nth-child(13) { animation-delay: 0.96s; }
.fb-typewriter span:nth-child(14) { animation-delay: 1.04s; }
@keyframes fb-type-in {
from { opacity: 0; }
}
/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
.fb-typewriter span { animation: none; transition: none; }
}
</style>
- どう動くか
- 文字が左から1文字ずつ現れます。読む速さと出る速さがそろうので、文を最後まで追ってもらえます。
- 使う場面
- 動画のテロップ、AIが答えている様子の再現、問いかけの一文。
- やりすぎに注意
- 長い文に使うと、読み終わるまで待たされます。一文が短いときだけ使います。
