ネイティブ js を使用してライブ バレット スクリーンのスクロール効果をシミュレートします。

ネイティブ js を使用してライブ バレット スクリーンのスクロール効果をシミュレートします。

1. 基本原則

まず、生放送エリアを10の部分に分割し(個人的には計算の便宜上10に分割しています)、入力コンテンツを10の分割領域にランダムに配置し、10の分割領域の右側のビューの外側に挿入してから、ランダムな速度で右から左に移動するアニメーションを呼び出します。左側の領域のビューの外側に移動すると、このスクロール要素を削除します。

2. 特定のコード

<div class="move_video_content">
    <div class="video_content">
        <div class="video_div" id="video_view"></div>
        <div class="scroll_content">
            <ul class="scroll_ul" id="scroll_ul_id"></ul> 
        </div>
    </div>
    <div class="input_content">
            <input type="text" class="input_text" maxlength="30" placeholder="送信したい弾幕を入力してください" id="input_text_id">
            <button type="button" class="button_btn" id="send_btn">送信</button>
    </div>
</div>

具体的な効果は以下のとおりです。

jsコードは次のとおりです

let inputText = document.getElementById("input_text_id");//入力ボックスlet scrollContent = document.getElementById("scroll_ul_id");//サイドチャットバーlet videoView = document.getElementById("video_view");//ビデオエリアlet videoWidth = videoView.offsetWidth;//ライブ放送エリアの合計幅let listHeight = videoView.offsetHeight/10;//ライブ放送エリアの各レイヤーの高さlet listTopNum = [0,1,2,3,4,5,6,7,8,9];//ライブ放送エリアの高さを10のレイヤーに分割document.getElementById("send_btn").addEventListener("click",function(){//送信ボタンをリッスンlet value = inputText.value;//入力ボックスの値を取得if(!value) return;
    appendDom(value); //入力ボックスの値をスクロールチャットに挿入します createVideoBulletChatDom(value); //入力ボックスの値を箇条書き画面に挿入します inputText.value = ''; //入力ボックスをクリアします scrollContent.scrollTop = scrollContent.scrollHeight; //自動的に一番下までスクロールします })
function appendDom(value){//入力ボックスの値をスクロールチャットに挿入します。let li = document.createElement("li");
    li.setAttribute("class","scroll_li");
    li.innerHTML = 値;
    scrollContent.appendChild(li);
}
speedArr = ['normal','fast','faster'] とします。
function createVideoBulletChatDom(value){//入力ボックスの値を箇条書き画面に挿入します。let num = listTopNum[Math.floor((Math.random()*listTopNum.length))];
    p = document.createElement("p"); とします。
    p.setAttribute("class","video_p");
    p.style.top = (num * 60) + "px";
    p.style.left = ビデオ幅 + "px";
    p.innerHTML = 値;
    ビデオビューに子要素を追加します。
    speed = speedArr[Math.floor((Math.random()*speedArr.length))] とします。
    Animate(p,speed); //スクロールアニメーション}
animateType = {
    '通常':5,
    '速い':10,
    'より速い':15
}
function Animate(dom,speed){//スクロールアニメーション let domWidth = dom.offsetWidth;//現在の弾丸画面要素の幅 let distance = videoWidth;//ライブ放送領域の合計幅 speed ? speed : 'normal';
    間隔をanimateType[速度]とします
    タイマー = setInterval(function(){
            距離 -= 間隔;
            dom.style.left = 距離 + 'px';
            if(距離 <= -domWidth){
                タイマーの間隔をクリアします。
                videoView.removeChild(dom); //画面からスクロールアウトしたラベルをクリアします}
    },50)
}

ライブ放送エリアを10個の部分に分割(listTopNum)に応じて、各レイヤーの高さ(listHeight)を取得し、スクロールラベルの上部を変更して、10個の部分の異なる領域に挿入します。

スクロール ラベルを作成すると、スクロール アニメーション (関数 Animate) が作成されます。デフォルトの速度は normal です。アニメーションを作成するたびに、ランダムな速度タイプ (normal、fast、faster) がランダムに渡されます。スクロールごとに減算される距離は、渡された速度タイプに応じて変更され、異なるスクロール速度を実現します。

要約する

暇な時に思いつきで書いたライブスクロールアニメーションです。WebSocket を追加すれば複数人同期通信も実現できます。暇な時に後日改良します。

具体的なコードについては[:github.com/liqc-wwl/bu…]にアクセスしてダウンロードし、効果を直接確認してください。

ネイティブ js を使用してライブ弾幕のスクロール効果をシミュレートする方法についての記事はこれで終わりです。ライブ弾幕スクロール コンテンツのより関連性の高い js シミュレーションについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript の弾丸スクリーン効果のシンプルな実装
  • JavaScript ベースで弾幕特殊効果を実現
  • JS で実装したビデオ弾幕スクリーン効果の例
  • JavaScript ライブコメント連発カット画像機能ポイント収集効果コード
  • 弾丸スクリーンの壁効果を実現する JavaScript
  • ビデオの弾幕効果を実現する JavaScript (2 つのバージョン)
  • 弾幕効果を実現するネイティブ js
  • js cavans が静的スクロール弾丸画面を実現
  • ネイティブ JS で弾幕スクリーン効果を実装するための簡単なガイド
  • 弾丸スクリーンの航空機効果を実現する js

<<:  Dockerを使用してPythonランタイム環境の基本イメージを作成する方法

>>:  MySQLテーブルシャーディングとパーティショニングの具体的な実装方法

推薦する

CSS で background-color を使用して背景画像にマスク効果を追加する 2 つの方法

div で background-color と background-image を同時に設定する...

IIS7~IIS8.5 サーバープロトコルヘッダーの削除または変更

要件: IIS 7、7.5、8.0、8.5、および ASP.NET で HTTP 応答ヘッダーを削除...

jQueryアニメーションを理解するのに役立つ記事

目次1. 要素の表示と非表示を制御する show() hide() 2. 要素の透明度を制御する f...

Mysql トランザクション分離レベルの読み取りコミットの詳細な説明

MySQL トランザクション分離レベルを表示する mysql> '%isolation...

Vue 基本チュートリアル: 条件付きレンダリングとリストレンダリング

目次序文1.1 機能1.2 要素の可視性を制御する方法1.3 初期レンダリングの比較1.4 スイッチ...

リンクされた画像をダウンロードしてアップロードするJavaScriptの実装

写真をアップロードするので、まずはダウンロード可能な画像リソースかどうかを判断する必要があります。正...

MySQL サーバー 5.7.20 のインストールと設定方法のグラフィック チュートリアル

この記事ではMySQL 5.7.20のインストールと設定方法を記録し、皆さんと共有します1. MyS...

あるテーブルからバッチデータをクエリし、それを別のテーブルに挿入する MySQL の完全な例

事前に言っておくNodejs はデータベースを非同期操作として読み取るため、データベースがデータを読...

JavaScript を使用して QR コードを解析する 3 つの方法

目次1. JavaScriptを使用してQRコードを解析する1. QR コードとは何ですか? 2.q...

MySQL デッドロックのトラブルシューティングの全プロセス記録

【著者】 Liu Bo: Ctrip テクニカル サポート センターのシニア データベース マネージ...

MySQLでデータベースデータ保存ディレクトリを変更する方法

序文MySQL データベースのデフォルトのデータベース ファイルは /var/lib/mysql に...

Reactプロジェクトで要素を使用する方法

React プロジェクトで要素フレームワークを使用するのは今回が初めてです。非常に単純な問題に遭遇し...

MySql 5.6.35 winx64 インストール詳細チュートリアル

注: データベースのバージョンの問題により、プロジェクトの起動時にエラーは発生しませんでしたが、デー...

Vueは2つのルーティング許可制御メソッドを実装しています

目次方法 1: ルーティング メタ情報 (meta)方法 2: ルーティング テーブルを動的に生成す...

VMware Workstation 14 Pro に Win10 システムをインストールする

この記事では、VMware Workstation 14 Proにシステムをインストールする方法を紹...