JSベースの手持ち連射機能＋テキスト揺れ特殊効果コードの簡単実装

少し前にTikTokで揺れる連打が流行っていたので真似してみることにしました。さっそく効果をみてみますと…

エフェクト表示

ここに画像の説明を挿入

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

一見、何をすればいいか分からないので、まずは実装する機能を分解してみましょう。

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

コードは次のとおりです

.html

 <div class="弾幕ボックス">
  <div class="text">揺れる字幕</div>
 </div>

.css

.弾幕ボックス{
  幅: 100vh;
  高さ：100vw;
  変換元: 50vw 50vw;
  変換: 回転(90度);
  空白: ラップなし;
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  背景色: #000;
  オーバーフロー: 非表示;
  アニメーション: aniShake 0.5 秒線形無限;
 }

 。文章 {
  幅: 100%;
  フォントサイズ: 50px;
  色: #FFF;
  アニメーション: aniMove 5秒線形無限;
  アニメーション塗りつぶしモード: forwards;
 }

 /* テキストのスクロール */
 @keyframes aniMove {
  0% { 変換: translateX(100%); }
  100% { 変換: translateX(-100%); }
 }
 
 /* 揺れる字幕効果*/
 @keyframes アニシェイク {
  0%、33% { テキストシャドウ: 3px -3px 0px #FE008E、-5px 5px 0px #00FFFF; }
  34%、66% { テキストシャドウ: 5px -5px 0px #FE008E、-3px 3px 0px #00FFFF; }
  67%、100% { テキストシャドウ: 3px -3px 0px #00FFFF、-5px 5px 0px #FE008E; }
 }

この時点で、揺れやスクロール効果のある手持ち弾幕機能が実現しました。

機能は複雑ではありません。最初はキャンバスで描画することを考えましたが、ミニプログラムではキャンバスなどのネイティブコンポーネントが比較的高いレベルにあります。特殊効果を切り替えたり、ポップアップウィンドウを書いて設定を変更したりしたい場合は、簡単ではありません。そこで私は CSS3 で調べて書いてみました。ただ言いたいのは、「CSS3 は素晴らしい!!!」ということです。

ミニプログラムでの設定効果のプレビューがさらに充実

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

ここに画像の説明を挿入

要約: 初めてブログを書きました。午後中ずっと削除とカットに費やしました。記事を書くのはあまり得意ではありませんが、それでも完成しました。結局、人は自分で成長することを学ばなければなりません...

JS ベースの手持ち連射機能 + テキスト揺れ特殊効果コードを簡単に実装する方法についての記事はこれで終わりです。より関連性の高い js 手持ち連射テキスト揺れコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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