HTML、CSS、JavaScript を使ったタイプライターエフェクトの作成

はじめに

この実験では、HTML、CSS、JavaScript を使ってタイプライターエフェクトのアニメーションを作成する方法を学びます。タイプライターエフェクトは、1 文字ずつページに入力されるようなテキストの表示をシミュレートする人気のあるアニメーションです。この実験が終わると、独自のタイプライターエフェクトのアニメーションを作成して、ウェブプロジェクトにダイナミックで魅力的な要素を追加できるようになります。

タイプライターエフェクト

VM 内には既にindex.htmlとstyle.cssが用意されています。

タイプライターエフェクトのアニメーションを作成するには、次の手順に従ってください。

1. typingとblinkの 2 つのアニメーションを定義します。typingは文字をアニメーション化し、blinkはカレットをアニメーション化します。
2. ::after疑似要素を使用して、ケアレットをコンテナ要素に追加します。
3. JavaScript を使用して、内部要素のテキストを設定し、文字数を含む--characters変数を設定します。この変数は、テキストをアニメーション化するために使用されます。
4. 必要に応じて、white-space: nowrapとoverflow: hiddenを使用してコンテンツを非表示にします。

以下が HTML コードです。

<div class="typewriter-effect">
  <div class="text" id="typewriter-text"></div>
</div>

以下が CSS コードです。

.typewriter-effect {
  display: flex;
  justify-content: center;
  font-family: monospace;
}

.typewriter-effect > .text {
  max-width: 0;
  animation: typing 3s steps(var(--characters)) infinite;
  white-space: nowrap;
  overflow: hidden;
}

.typewriter-effect::after {
  content: " |";
  animation: blink 1s infinite;
  animation-timing-function: step-end;
}

@keyframes typing {
  75%,
  100% {
    max-width: calc(var(--characters) * 1ch);
  }
}

@keyframes blink {
  0%,
  75%,
  100% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
}

最後に、以下が JavaScript コードです。

const typeWriter = document.getElementById("typewriter-text");
const text = "Lorem ipsum dolor sit amet.";

typeWriter.innerHTML = text;
typeWriter.style.setProperty("--characters", text.length);

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます！あなたはタイプライターエフェクトの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。