JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでタイピング効果（タイプライターエフェクト）を作成する方法を解説

Webサイトに動きを加える演出のひとつとして人気が高いのが、文字が一文字ずつ打ち込まれていくような「タイピング効果（タイプライターエフェクト）」です。JavaScriptでは、setTimeout() を使った再帰処理と charAt() メソッドを組み合わせることで、この効果をシンプルに実装できます。

以下に、ボタンをクリックするとテキストが一文字ずつ表示されるサンプルコードを紹介します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    button{
        padding:10px;
        font-size: 18px;
        background-color: rgb(128, 19, 218);
        color:white;
        border:none;
    }
    .heading{
        color:crimson;
    }
</style>
</head>
<body>
<h1>typeText</h1>
<button class="typeButton">Click me</button>
<h2 class="heading"></h2>
<script>
    document.querySelector('.typeButton').addEventListener('click',typeText);
    var i = 0;
    var text = 'This text is currently being typed across... It is still typing..';
    var speed = 50;
    function typeText() {
        if (i < text.length) {
            document.querySelector('.heading').innerHTML += text.charAt(i);
            i++;
            setTimeout(typeText, speed);
        }
    }
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、次のような画面が表示されます。

JavaScriptでタイピング効果（タイプライターエフェクト）を作成する方法を解説

「Click me」ボタンをクリックすると、指定したテキストが一文字ずつ順番に表示されていきます。

JavaScriptでタイピング効果（タイプライターエフェクト）を作成する方法を解説

コードの仕組み

このタイピング効果は、次の流れで動作しています。

1. クリックイベントの登録

addEventListener('click', typeText) によって、ボタンがクリックされたタイミングで typeText 関数が呼び出されます。

2. 一文字ずつの描画

text.charAt(i) で変数 i の位置にある文字を取り出し、innerHTML に追記することで、表示される文字をひとつずつ増やしていきます。

3. setTimeoutによる再帰呼び出し

setTimeout(typeText, speed) が自分自身を50ミリ秒ごとに再帰的に呼び出すことで、あたかも人がキーボードで入力しているかのような演出を実現しています。変数 speed の値を小さくすれば入力速度が速くなり、大きくすればゆっくりとしたタイピングになります。

4. 終了条件

i がテキスト全体の長さ（text.length）に達すると条件分岐が成立しなくなり、処理が自動的に終了します。

応用ポイント

  • カーソルの点滅：CSSアニメーションで「|」などの要素を点滅させると、より本格的なタイプライター風の見た目になります。
  • 複数行のテキスト対応：配列に複数の文字列を格納し、1文ごとに繰り返し処理を行うことで、複数行のタイピング演出にも拡張できます。
  • 削除しながらループ：表示後に文字を減らしていく処理を追加すれば、よく見かける「入力→削除→別の文言」を繰り返すアニメーションも作れます。

ぜひこの基本形をベースに、自分のサイトやポートフォリオに合ったタイピング効果へとカスタマイズしてみてください。

  1. JavaScriptとCSSで作る！タイプライター風の文字入力・削除エフェクトの実装方法

    CSSアニメーションとJavaScriptを組み合わせることで、まるでタイプライターで打っているかのような「文字の入力」と「削除」を繰り返すエフェクトを実装できます。Webサイトのヒーローセクションやキャッチコピーの演出など、訪問者の目を引く演出として幅広く活用できる人気のテクニックです。以下のサンプルコードでは、複数のテキストを順番にタイプ表示し、すべて表示し終えると今度は1文字ずつ削除していく動きを再現しています。実装例<!DOCTYPE html> <html> <style> div {    display: flex; &nb

  2. CSSでオーバーレイ効果を作成する方法を徹底解説！サンプルコード付き

    CSSでオーバーレイ（overlay）効果を作成するには、position: fixed を使って画面全体に固定表示される要素を作り、JavaScriptで表示・非表示を切り替えるのが一般的な手法です。この記事では、ボタンをクリックすると全画面にオーバーレイが表示され、×ボタンで閉じられる実装例を、実際のコードとともにわかりやすく解説します。 オーバーレイ効果とは？ オーバーレイ効果とは、ページの上に半透明の黒い背景などを重ねて表示し、その上に検索バーやメニューなどのコンテンツを浮かせる演出のことです。モーダルウィンドウや全画面検索フォームなど、多くのWebサイトで活用されているテクニックです