CSS と JavaScript を使用してテキスト表示を 1 文字ずつアニメーション化する方法-CSSチュートリアル-php.cn

CSS と JavaScript を使用してテキスト表示を 1 文字ずつアニメーション化する方法

Linda Hamilton

リリース： 2024-10-25 06:04:29

オリジナル

243 人が閲覧しました

How to Animate Text Display Letter by Letter with CSS and JavaScript?

CSS と JavaScript を使用したアニメーションテキスト表示

テキストを 1 文字ずつ表示すると、Web ページに動的で魅力的な要素が追加されます。ブルートフォース手法も存在しますが、CSS3 と jQuery はより洗練されたソリューションを提供します。

CSS3 アニメーション

CSS3 は、テキストの複数のシャドウを作成する text-shadow プロパティを提供します。。影をアニメーション化することで、テキストが 1 文字ずつ表示されるように錯覚させることができます。

<code class="css">#msg {
  text-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
  animation: show-text 3s steps(5);
  animation-fill-mode: forwards;
}

@keyframes show-text {
  from {
    text-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent;
  }
  to {
    text-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
  }
}</code>

ログイン後にコピー

jQuery アニメーション

jQuery は、アニメーションを分割することで、より直接的なアプローチを提供します。テキストを個々の文字に分割し、指定された間隔でターゲット要素に追加します。

<code class="html"><div id="msg"></div></code>

ログイン後にコピー

<code class="jquery">var showText = function (target, message, index, interval) {
  if (index < message.length) {
    $(target).append(message[index++]);
    setTimeout(function () { showText(target, message, index, interval); }, interval);
  }
};

$(function () {
  showText("#msg", "Hello, World!", 0, 500);
});</code>

ログイン後にコピー

このソリューションは、各子要素にアニメーションを再帰的に適用することによる内部 HTML コンテンツの処理もサポートしています。

以上がCSS と JavaScript を使用してテキスト表示を 1 文字ずつアニメーション化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。