タイプライター効果を実現する純粋な js

タイプライター効果を実現する純粋な js

この記事の例では、タイプライター効果を実現するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

レンダリング

アプリケーションシナリオ

あまり役に立ちません。ネットで似たようなエフェクトを見て、40行か50行くらい理解できないコードを書いたので、簡単に実装できないか試してみました。

html

<h2 id="テキストボックス"></h2>
<!-- 1 行もコードです -->
CS

        h2 {
   幅: 800ピクセル;
   行の高さ: 40px;
   下境界線: 1px 実線;
   マージン: 200px 自動;
   フォントサイズ: 24px;
  }
  
  .アニメーション {
   表示: インラインブロック;
   パディング: 0 5px;
   垂直方向の配置: 3px;
   フォントサイズ: 20px;
   フォントの太さ: 標準;
  }
  
  .animate.on {
   アニメーション: 1.5 秒の無限前方フェード。
  }
  
  @keyframes フェード {
   から {
    不透明度: 0;
   }
   に {
    不透明度: 1;
   }
  }

js

textBox を $('#text-box') とします。
インデックスを 0 にします。
let str = '私のウェブサイトへようこそ!';
 
  len = str.length;とします。
 
  関数入力() {
 
   textBox.html(str.substr(0, index) + '<span class="animate">|</span>');
 
   setTimeout(関数() {
    インデックス++;
 
    if(インデックス === 長さ + 1) {
     $('.animate').addClass('on');
     戻る;
    }
 
    入力();
 
   }, Math.random() * 600)
 
   コンソールログ(インデックス);
  }
 
  入力();

実施原則

タイマーは文字列インターセプションと組み合わせてタイプライターのようなフラストレーション感を実現し、インデックスは再帰を通じて蓄積されます。これは、最初の 1 秒で 1 バイトをインターセプトし、次の 1 秒で 2 バイトをインターセプトする、という操作と同じです。タイマーは乱数を取得して、入力時の一時停止感覚をより適切にシミュレートします。再帰呼び出しに終了ループ条件を追加し、終了前にアニメーションを開始してカーソルのジャンプをシミュレートします。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JS で実装されたタイプライター効果の完全な例
  • JavaScript ゲーム開発:「三国志演義 曹操伝」コンポーネント開発(第 3 回)シナリオ ダイアログでのタイプライター風テキスト出力
  • JavaScript テキストエリア タイプライター効果 プロンプトコード 推奨
  • js タイプライター効果コード

<<:  MySQLクエリキャッシュの簡単な使い方の詳細な説明

>>:  Docker Secretの管理と使用の詳細な説明

推薦する

Windows に MySQL 8.0.16 をインストールする手順とエラーの解決方法

1. はじめに: mysql8以降は、これまでよく使われていたバージョンと比べてかなり変更点が大きい...

Node.js のフロントエンドとバックエンドのインタラクションによるユーザーログインの実装の実践

目次1. プロジェクト要件次にコーディングを始める1. フロントエンドページを作成する(CSSスタイ...

VueはTodoListの例をカプセル化し、ブラウザのローカルキャッシュのアプリケーションを実装します。

この記事では主に、Vue で TodoList をカプセル化するケースと、ブラウザのローカル キャッ...

MySql における無効な Null セグメント判定と IFNULL() 失敗の解決策

MySql Nullフィールド判定とIFNULL失敗処理ps: (プロセスを表示したくない場合は、S...

Webpack での publicPath の使用法の詳細な説明

目次出力出力パス出力.publicPath webpack-dev-server の publicP...

CSS 命名: BEM、スコープ付き CSS、CSS モジュール、CSS-in-JS の説明

CSS の適用範囲はグローバルです。プロジェクトがどんどん大きくなり、参加する人が増えるにつれて、命...

Docker で Rancher をデプロイする方法 (落とし穴なし)

操作前に必ずお読みください:注意:管理に rancher を使用する場合は、k8s クラスターが構築...

MacでのMySQL5.7.22のインストール手順

1. インストールパッケージを使用してMySQLをインストールします(オンラインダウンロードは遅すぎ...

MYSQL(電話番号、IDカード)データ非感応化の実装

1. データ感度低下の説明日常の開発ニーズでは、データの感度低下が頻繁に発生します。たとえば、ID ...

HTMLでカスタムタグを使用する方法

カスタム タグは XML ファイルと HTML ファイルで自由に使用できますが、いくつか注意すべき点...

MySQL ストアド プロシージャの使用例の分析

この記事では、MySQL ストアド プロシージャの使用方法について説明します。ご参考までに、詳細は以...

リンクをクリックしたときに表示される点線のボックスを削除するいくつかの方法

削除する方法はいくつかあります:リンクを直接追加するonfocus="this.blur(...

alpineをベースにdockerfileで作成したクローラーScrapyイメージの実装

1.アルパインイメージをダウンロードする [root@DockerBrian ~]# docker ...

VUEウォッチリスナーの基本的な使い方の詳しい説明

目次1. 次のコードはwatchの簡単な使用法です2. 即時監視3. ハンドラメソッド4. 深い属性...

JavaScriptタイマーとボタン効果設定の詳細な説明

タイマー効果: <div> <font id='timeCount'...