タイプライター効果を実現する純粋な 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の管理と使用の詳細な説明

推薦する

Vue カードスタイルのクリックして切り替える画像コンポーネントの使用方法の詳細な説明

この記事では、vueカードスタイルのクリックして切り替える画像コンポーネントを参考までに紹介します。...

div の高さをブラウザの高さに合わせて調整する方法

この古くからある疑問は、数え切れないほどのフロントエンド開発者やバックエンドプログラマーを悩ませてき...

MySQLとNavicatプレミアムのインストールと設定の詳細な手順

前提条件: Mac、zsh がインストールされ、bash のときに mysql がダウンロードされ、...

CSS3 クリアフロートメソッドの例

1. 目的この記事を通じて、誰もがフロートをクリアする原理と方法を理解し、最終的にこの記事が最良であ...

JSはBaidu Newsナビゲーションバーの効果を実現

この記事では、Baidu News Navigation Barの効果を実現するための具体的なJSコ...

Tomcat サーバーの設定と Web プロジェクトの公開に関する IDEA グラフィック チュートリアル

1. Webプロジェクトを作成したら、Tomcatを例にサーバーを構成する必要があります。 2. 実...

mysql8.x docker リモートアクセスの詳細な設定

目次環境条件エラーが発生しました回避策1. mysql dockerにログインする2. ルートパスワ...

ZFS とは何か? ZFS を使用する理由とその機能

ZFSの歴史Z ファイル システム (ZFS) は、2001 年に Matthew Ahrens と...

アイデアはDockerプラグインを使用してワンクリックの自動デプロイを実現します

目次環境: 1. Dockerはリモート接続アクセスを可能にするidea dockerプラグインをイ...

VMWare12 グラフィックチュートリアルで Apple Mac OS X をインストールする

1. はじめに:友人はシステム知識を学びたいと考えており、Apple のラップトップを使用していまし...

CSS でフロートとマージンを混合するサンプルコード

最近の勉強で、GitHub でレイアウトの練習をいくつか見つけたのですが、レイアウトにまったく慣れて...

Windows10にMySQL5.6.35データベースを2つインストールする

次のように、Win10 での 2 つの MySQL5.6.35 データベースのインストールを記録しま...

HTML での一般的なリダイレクト接続の例コード

コードをコピーコードは次のとおりです。 window.location.href="zcb...

Quickjs は JavaScript サンドボックスの詳細をカプセル化します

目次1. シナリオ2. 基盤となるAPIを簡素化する2.1 自動的に破棄を呼び出す2.2 VM値を作...

MySQLストレージエンジンについて学びましょう

目次序文1. MySQL メインストレージエンジン: 2. さまざまなストレージエンジンがテーブルを...