ハンドヘルドバラージ関数の簡単な実装+テキストジッター効果

少し前に、Douyinにかなり暑いジッター弾幕があったので、私はそれを模倣することに決めました、言うまでもなく、最初に効果を見てください...

結果を示す

ここに画像の説明を挿入

GIF画像は少しぼやけて見えますが、実際の効果はまだ良好です。

一見何をすればいいのかわからないので、実装する関数を逆アセンブルしましょう。

フルスクリーンの黒い背景を生成し、テキストを書き込んでから、コンテンツを中央に配置します
シームレスなスクロールを実現
テキストジッター効果を実現する
90度回転（デフォルトの水平画面表示）

コードは以下のように表示されます

.html


  <div class="barrage-box">
      <div class="text">抖动字幕</div>
  </div>

.css


  .barrage-box {
    
    
       width: 100vh;
       height: 100vw;
       transform-origin: 50vw 50vw;
       transform: rotate(90deg);
       white-space: nowrap;
       display: flex;
       justify-content: center;
       align-items: center;
       background-color: #000;
       overflow: hidden;
       animation: aniShake 0.5s linear infinite;
   }

   .text {
    
    
       width: 100%;
       font-size: 50px;
       color: #FFF;
       animation: aniMove 5s linear infinite;
       animation-fill-mode: forwards;
   }

   /* 文字滚动 */
   @keyframes aniMove {
    
    
       0% {
    
     transform: translateX(100%); }
       100% {
    
     transform: translateX(-100%); }
   }
   
   /* 抖动字幕效果 */
   @keyframes aniShake {
    
    
       0%, 32% {
    
     text-shadow: 3px -3px 0px #FE008E, -5px 5px 0px #00FFFF; }
       33%, 65% {
    
     text-shadow: 5px -5px 0px #FE008E, -3px 3px 0px #00FFFF; }
       66%, 99% {
    
     text-shadow: 3px -3px 0px #00FFFF, -5px 5px 0px #FE008E; }
       100% {
    
     text-shadow: 5px -5px 0px #00FFFF, -3px 3px 0px #FE008E; }
   }

この時点で、ジッターやスクロール効果を含むハンドヘルドバラージ機能が実現されています。

機能は複雑ではありません。最初はキャンバスで描きたかったのですが、小さなプログラムではキャンバスなどのネイティブコンポーネントのレベルが比較的高いです。特殊効果を切り替えてポップアップウィンドウを作成して変更したい場合構成、取り扱いが容易ではありません。それで私はそれを研究してcss3で書きました。ここで私はただ言いたいです：「css3ビープ音———— !!!」

アプレットでのその他の構成効果のプレビュー

最近、小さなプログラムを作って、ハンドヘルドバラージの機能を追加し、より多くの機能を実現しました。設定したコンテンツを友達と共有することもできます。コードをスキャンして体験し、サポートしてください...

ここに画像の説明を挿入

総括する

初めてブログを書いたので、午後中ずっと記事の書き方がわからなかったのですが、それでも弾丸を噛んで完成させたので、結局、人は自分で成長することを学ばなければなりません...