ウェブサイト検索

CSS を使用してタイプライター効果を作成する方法

古典的なタイプライター効果を作成するのに JavaScript は必要ありません。 Steps() 関数を使用して CSS だけでこれを行う方法を学びましょう。

カスケード スタイル シート (CSS) は、その誕生以来、長い道のりを歩んできました。言語の継続的な進化と強化のおかげで、CSS だけで実現できることの中に、あなたが知らないかもしれないことがあります。

CSS の最も注目すべき進歩の 1 つは、CSS 関数の出現と改良であり、これにより、Web コンテンツのスタイル設定の機能と能力が大幅に拡張されました。

タイプライター効果とは何ですか?

タイプライター効果は、コンテンツが徐々に公開されるプロセスをシミュレートし、視聴者の目の前で展開されるタイピング行為を模倣するテキスト アニメーション技術です。この効果は、昔ながらのタイプライター、初期のコンピューター端末、またはコマンド ライン インターフェイス (CLI) を思い出させます。

テキストが徐々に現れることで、サスペンスと陰謀の要素が追加され、展開されるメッセージに聴衆が細心の注意を払うように促します。

CSS の Steps() 関数の仕組み

CSS の関数は、以前は静的スタイルだけを使用して達成するのが困難であったレベルの柔軟性を導入します。 steps() 関数は、CSS アニメーションで使用される一般的な関数です。これにより、アニメーションがスムーズに移行するのではなく、明確な個別のステップで進んでいるように見えます。

steps() は、2 つのパラメータを受け取るアニメーション タイミング関数です。最初のパラメータは、アニメーションに実行するステップ数を示します。 2 番目のパラメーターは、各ステップの動作を定義します。 steps() 関数の構文は次のようになります。

animation-timing-function: steps(n, direction)

上記のコード ブロックの steps() 関数には、n と direction という 2 つのパラメータがあります。 方向パラメータは開始または終了のいずれかです。

方向を開始に設定すると、アニメーションが開始するとすぐに最初のステップが完了します。一方、方向を終了に設定すると、アニメーションの終了時に最後のステップが実行されます。 steps() 関数の重要性を説明するために、次の HTML コードを見てください。

<div class="container">
  <div></div>
</div>

上記のコード ブロックは、子 div を持つコンテナ div を定義します。子 div を画面上でスライドさせたい場合は、次のような CSS アニメーションを使用します。

.container {
    background-color: blue;
}
div:not(.container) {
    background-color: red;
    width: 88px;
    height: 88px;
    animation: movebox 4s infinite;
}
@keyframes movebox {
    100% {
        transform: translateX(100vw);
    }
}

上記のコード ブロックは、@keyframes ルールを利用して、movebox という名前のアニメーションを定義します。このアニメーションは子 div に適用され、無限ループで画面上を滑らかに移動します。

GIPHY経由

スムーズなアニメーションが好きではなく、「途切れ途切れの」効果を実現したい場合は、次のように steps() 関数を使用できます。

div:not(.container){
    background-color: red;
    width: 88px;
    height: 88px;
    animation: movebox 4s infinite;
    animation-timing-function: steps(10, end);
}

以下の GIF でわかるように、パラメータ値 10 を指定してsteps() 関数を組み込むと、スムーズなアニメーションではなく、子 div がステップ単位でアニメーション化されます。ステップ数が多いほど、アニメーションの途切れが少なくなります。

GIPHY経由

上記の例では、方向パラメータが指定されています。ただし、方向を省略すると、ブラウザは方向のデフォルト値として終了を使用します。

タイプライター効果の作成

steps() 関数の仕組みが理解できたので、学んだことをすべて実践してみましょう。新しいフォルダーを作成し、適切な名前を付けます。そのフォルダーに、マークアップ用の index.htm ファイルとスタイル用の style.css ファイルを追加します。

index.htm ファイルに、次の定型コードを追加します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="text">
        Lorem ipsum dolor sit amet consectetur 
        adipisicing elit. Reiciendis, tempore! 
      </div>
    </div>
  </body>
</html>

上記のコード ブロックは、単純な HTML Web サイトのマークアップを定義します。ダミーテキストを含む別の div を保持するコンテナ div があります。

テキストのアニメーション化

styles.css ファイルを開き、コンテナ div の幅をそのコンテンツの幅に設定します。

.container{
    width: fit-content;
}

次に、@keyframes ルールを使用して、時間の経過とともにアニメーションがどのように進行するかを制御するアニメーションを定義します。幅を0％の「0％」に設定します。 100% では、次のように幅を「100%」に設定します。

@keyframes type-text {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

次に、 クラス名がテキストの要素を選択し、オーバーフロープロパティを非表示に設定します。これを行うと、入力効果が開始されない限り、テキストは非表示のままになります。その後、空白プロパティをナウラップに設定して、テキストが 1 行に収まるようにします。 text クラスに等幅フォントを指定し、テキストの右側に緑色の垂直境界線を追加します。

この境界線はカーソルの外観を与えます。適切なフォント サイズ とアニメーション プロパティをタイプ テキストに設定します。最後に、steps() 関数を animation-timing-function に追加します。

.text {
  overflow: hidden;
  white-space: nowrap;
  font-family: "Courier New", Courier, monospace;
  border-right: solid 10px green;
  font-size: 23px;
  animation: type-text forwards 4s;
  animation-timing-function: steps(40);
}

ブラウザでコードを実行すると、次のように表示されます。

GIPHY経由

より長いタイピング効果が必要な場合は、steps() 関数で指定したアニメーションの長さとステップ数を調整できます。

カーソルに命を吹き込む

タイプライター効果はほぼ完成していますが、カーソルの点滅という機能が 1 つ欠けています。最後のコード ブロックで、カーソルとして機能する右向きの境界線がテキスト上に設定されたことを思い出してください。 @keyframes ルールを使用して、このカーソルにアニメーションを追加することもできます。

@keyframes cursor-blink {
    0% {
        border-color: transparent;
    }
    100% {
        border-color: green;
    }
}

カスタム アニメーションを定義した後、 アニメーション名をテキスト クラスのアニメーション プロパティに追加し、継続時間を 0.6 秒に設定します。

.text{
    /* Other style rules*/
    animation: type-text forwards 4s,
             cursor-blink .6s infinite;
}

コードを実行すると、点滅するカーソルが表示されるはずです。

GIPHY経由

CSS 関数の力

CSS 機能は Web サイトの構築方法に革命をもたらし、開発者に優れたツールキットを提供します。これらの多用途関数により、かつては複雑なスクリプト言語のために予約されていた動的なスタイル設定や対話が可能になります。

カラー操作からレスポンシブなレイアウト、アニメーション、クリエイティブな変換まで、CSS 機能は Web デザインの可能性を広げました。柔軟な計算のための calc() 、見事な背景のための Linear-gradient() 、魅力的なアニメーションのための Translation() などの関数を使用して、視覚的に魅力的で魅力的なユーザー エクスペリエンスを作成できます。

関連記事: