タイプライター効果を実現する純粋な 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;
   }
  }

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 を応援していただければ幸いです。

以下もご興味があるかもしれません: