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

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

CSSアニメーションとJavaScriptを組み合わせることで、まるでタイプライターで打っているかのような「文字の入力」と「削除」を繰り返すエフェクトを実装できます。Webサイトのヒーローセクションやキャッチコピーの演出など、訪問者の目を引く演出として幅広く活用できる人気のテクニックです。

以下のサンプルコードでは、複数のテキストを順番にタイプ表示し、すべて表示し終えると今度は1文字ずつ削除していく動きを再現しています。

実装例

<!DOCTYPE html>
<html>
<style>
div {
   display: flex;
   margin: 4%;
   padding: 2%;
   box-shadow: inset 0 0 12px blue;
}
p {
   font-family: "Courier Monospace";
   font-size: 2em;
   color: red;
}
p:last-of-type {
   animation: type 0.33s infinite;
}
@keyframes type{
   to { opacity: .0; }
}
</style>
<body>
<div>
<p id="text"></p>
<p>|</p>
</div>
<script>
const words = ["Nulla", "facilisi", "Cras sed odio sed leo laoreet molestie id non purus.."];
let i = 0;
let counter;
function typeNow() {
   let word = words[i].split("");
   var loopTyping = function() {
      if (word.length > 0) {
         document.getElementById('text').innerHTML += word.shift();
      } else {
         deleteNow();
         return false;
      };
      counter = setTimeout(loopTyping, 200);
   };
   loopTyping();
};
function deleteNow() {
   let word = words[i].split("");
   var loopDeleting = function() {
      if (word.length > 0) {
         word.pop();
         document.getElementById('text').innerHTML = word.join("");
      } else {
         if (words.length > (i + 1)) {
            i++;
         }
         else {
            i = 0;
         };
         typeNow();
         return false;
      };
      counter = setTimeout(loopDeleting, 200);
   };
   loopDeleting();
};
typeNow();
</script>
</body>
</html>

コードのポイント

このエフェクトは、次のような仕組みで動作しています。

1. 表示するテキストを配列で管理

変数wordsに、順番に表示したいテキストを配列として格納します。ここに要素を追加するだけで、表示される文言を自由に増やせます。

2. 入力処理（typeNow関数）

split("")でテキストを1文字ずつ分解し、shift()で先頭の文字を取り出しながらHTMLに追記していきます。setTimeoutを使って200ミリ秒ごとに1文字ずつ表示することで、タイピングしているような自然なリズムを生み出しています。

3. 削除処理（deleteNow関数）

すべての文字を表示し終えたら、今度はpop()で末尾の文字を取り除きながらテキストを短くしていきます。文字が空になったら、次のテキスト（または最初のテキスト）に切り替えて再度入力処理を開始し、これを無限にループさせます。

4. 点滅するカーソル

テキストの横に表示される縦棒「|」はCSSの@keyframesによるアニメーションで不透明度を変化させており、実際のカーソルのように点滅して見えます。

出力結果

このコードをブラウザで開くと、赤い等幅フォントのテキストがカーソルとともに点滅しながら、1文字ずつ入力され、その後1文字ずつ削除されていく様子を確認できます。テキストは配列内の3つの文言を順番に繰り返し表示します。

  1. JavaScriptでCSS変数を取得・設定する方法

    JavaScriptを活用すると、CSS変数（カスタムプロパティ）の値を動的に読み取ったり、書き換えたりすることができます。ポイントになるのは、次の3つのメソッドです。 1. getComputedStyle() ― 適用済みスタイルの取得 getComputedStyle()メソッドは、対象の要素に実際に適用されているすべてのスタイル情報を含むオブジェクトを返します。このオブジェクトには、CSS変数の値も含まれています。 2. getPropertyValue() ― 目的のプロパティ値の取得 getComputedStyle()が返したオブジェクトに対してgetPropertyVal

  2. CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

    CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini