JavaScriptで実現できるエフェクトをご紹介

こんにちは。開発部まつおかです。

先日、開発部ヤマダの記事「やってみると意外と簡単！？jQueryでアコーディオンメニューを作る方法」でjQueryの紹介があったかと思いますが、今回はJavaScriptを使って、「タイピングしているかのようなエフェクト」をつける方法をご紹介します。

JavaScriptエフェクトの実現

では、早速今回のテーマである「タイピングしているかのようなエフェクト」を実現させていきましょう。

まず、イメージとしては下記のようなエフェクトを実現させていきます。

このように1文字ずつ入力していくような感じで表示するエフェクトにするのが今回の目標です。

実際にプログラムを書いていこう！

では実際にタイピングしているかのようなエフェクトを実現するコードを書いていきましょう。

JavaScriptのソースコード

// 文字列を1文字ずつ遅延描画させる処理
function drawTyping(attribute) {
    "use strict";

    // 遅延描画させたい対象をここで取得します
    var displayTypingList = document.querySelectorAll(attribute);
    // 取得した対象すべてに対して、遅延描画させていきます
    Array.prototype.forEach.call(displayTypingList, function (ele) {
        // 変数定義
        var i = 0;
        var newStr = '';
        var baseStr = ele.innerText.trim();

        // 表示する初期値
        ele.innerText = '_';

        // 1文字ずつ順番に描画していきます
        var timeId = setInterval(function () {
            // 規定の文字列を全て描画しきれていない場合
            if (i < baseStr.length) {
                // 1文字追加して描画します
                newStr += baseStr.charAt(i);
                ele.innerText = newStr + '_';
                i++;
            }
            // 規定の文字列を全て描画し終えた場合
            else {
                // 遅延描画処理を終了します
                clearInterval(timeId);
            }
        }, 100);
    });
}

// ページ表示時に実行される処理
window.addEventListener("load", function (e) {
    drawTyping('.typingDisplay');
});

HTMLに書くHTMLタグ

<p class="typingDisplay">JavaScriptでできるエフェクト　その１　まえ</p>
<p>エフェクト対象にしない文字列</p>
<p class="typingDisplay">JavaScriptでできるエフェクト　その１　うしろ</p>

ポイントはHTML側でclass属性を指定して、エフェクトをかける対象にするかしないかを設定できるところですね。

JavaScript側の37行目

drawTyping('.typingDisplay')

の箇所でエフェクトをかける対象を選択しているのです。

実際に設定したときのサンプルは下記ページのようになります。

JavaScriptでできるエフェクトその１
(見逃しちゃった！という方は、デモページを再読込してもらえれば再度エフェクトが見れます。)

いかがでしたか？

今回はJavaScriptを使って、タイピングのようなエフェクトをつける方法をご紹介させていただきました。

少し仕組み的にも難しい部分もあったかもしれませんが、ほんの少しJavaScriptを追加するだけで色々なエフェクトをつけることができるので、今後も色々とご紹介できればと思います。

まつおか