【コピペOK】javascriptで作るタイピングアニメーション

サムネイル
               

動きのあるサイトってかっこいいですよね。

 

この記事ではJavaScriptを使ったタイピングアニメーションの作り方を解説していきます。

 

JavaScriptを使わない場合の限界と、著者のWordPressテーマへの適用例について説明していきますね。

 

実際の使用例も見ることができるのでより実践的だと思います。

 

今回は、文字がタイピングする動きをつけるjavascriptアニメーションについて解説していきます。

 

もちろん、コピペOKです。

 

 

javascriptでタイピングアニメーションを実装する手順

 

See the Pen
text animation by moridai1104 (@moridai1104)
on CodePen.

 

 

HTML構造

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Moridai-Dev</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 id="typing-text" class="typing-text"></h1>
    </div>
    <script src="script.js"></script>
</body>
</html>
  • DOCTYPEとhtmlタグ: ページのHTML5形式を定義し、言語を指定しています。

 

  • <head>セクション: 文書のメタ情報やスタイルシート、JavaScriptファイルへのリンクを含んでいます。

 

  • <body>セクション: 実際のコンテンツが表示されます。ここでは、<div>内にタイピングアニメーションのテキストが表示されます。

 

 

 

 

CSSの設定

 

/* styles.css */
body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f5f5f5;
}

.container {
  text-align: center;
}

.typing-text {
  font-size: 3em;
  color: #333;
  overflow: hidden;
  border-right: 0.15em solid orange;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 0.15em;
  animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: orange;
  }
}

 

  • .typing-textクラスは、タイピングアニメーションのためのスタイルを設定しています。

 

  • overflow: hidden: 要素からの内容のはみ出しを隠すように設定しています。

 

  • border-right: .15em solid orange: 右側に0.15emの太さでオレンジ色のボーダーを表示し、これによってタイピング風のアニメーションを演出しています。

 

  • white-space: nowrap: テキストが横に長くなった場合に改行せず、1行で表示するように設定しています。

 

  • animation: typing 3s steps(40, end), blink-caret .75s step-end infinite;: typingとblink-caretというアニメーションを定義し、それぞれ3秒と0.75秒で実行します。typingは文字のタイピングアニメーションで、blink-caretはカーソル点滅のアニメーションを表します。

 

  • typingとblink-caretはそれぞれアニメーションのキーフレームを定義しています。

 

  • typing: 要素の幅を0から100%まで変化させることで、文字がタイピングされるようなアニメーションを表現しています。

 

  • blink-caret: カーソルの点滅を表現するためのアニメーションです。透明なボーダーカラーをオレンジに変化させ、カーソルの点滅効果を作り出しています。

 

JavaScriptの実装

 

// script.js

document.addEventListener("DOMContentLoaded", function () {
  const text = "Moridai-Dev";
  let index = 0;
  const typingText = document.getElementById("typing-text");

  function typeWriter() {
    typingText.textContent = text.slice(0, index);
    index++;

    if (index > text.length) {
      index = 0;
    }

    setTimeout(typeWriter, 250); // 150ミリ秒ごとに文字を追加する
  }

  typeWriter();
});

 

コードの動作

  1. text変数に表示したいテキスト “Moridai-Dev” を設定しています。
  2. index変数は、表示するテキストのインデックス位置を追跡します。最初は0から始まります。
  3. typingTextは、HTML内のidがtyping-textである要素を取得しています。これは後でテキストを表示するための要素です。
  4. typeWriter関数は、テキストを1文字ずつ表示するための関数です。
    • typingText.textContent = text.slice(0, index); は、text変数から0からindexまでの部分文字列を取得してtypingText要素のテキストとして設定します。
    • index++ で次の文字を表示するためにindexをインクリメントします。
    • if (index > text.length) { index = 0; } は、indexがtextの文字列の長さを超えたら、indexを0にリセットします。
    • setTimeout(typeWriter, 250); は、250ミリ秒ごとに typeWriter 関数を実行します。これにより、文字が順番に表示されるタイピングアニメーションが実現されます。

 

このコードでは、文字列 “Moridai-Dev” を0.25秒ごとに1文字ずつ表示しており、文字列の最後まで表示されたら最初から再度表示されるようになっています。setTimeout関数により、定期的な文字の更新が行われ、タイピングのような効果が生み出されます。

 

 

JSなしでもタイピングアニメーションはできるが微妙

 

See the Pen
text amimation no JS by moridai1104 (@moridai1104)
on CodePen.


CSSだけだとちょっと動きが淡泊で味気ない感じになるますね。

これはこれでアリかもですが、チト微妙かと。。。

 

筆者の自作WPテーマのタイピングアニメーション

 


カフェをイメージしたサイトのタイトルをタイピングアニメーションを実装しました。

 

トップ画面のタイトルなので、一気に見栄えが良くなりますよ。

 

まとめ

  • JavaScriptでタイピングアニメーションを実装する手順：HTML構造の設定、CSSの適用、JavaScriptの実装、そしてコードの動作について詳しく説明しています。これにより、読者は自分のウェブサイトにタイピングアニメーションを追加する方法を学ぶことができます。

 

  • JSなしでもタイピングアニメーションはできるが微妙：JavaScriptを使用しないでタイピングアニメーションを作成することも可能ですが、その結果は必ずしも理想的とは言えません。

 

  • 筆者の自作WPテーマのタイピングアニメーション：記事の著者は、自分のWordPressテーマにタイピングアニメーションを組み込んでいます。これは、ウェブサイトの視覚的な魅力を高め、訪問者の注目を引く効果的な方法です。