ネイティブ 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テーブルシャーディングとパーティショニングの具体的な実装方法

推薦する

Linux のような環境で jdk1.8 をインストールし、環境変数を設定する方法の詳細な説明

設定は非常にシンプルですが、毎回確認しないといけないので、記録だけ残しておきます。 1. インストー...

JavaScript でオブザーバー パターンを実装する方法

目次概要オブザーバーパターンの応用シナリオオブザーバーパターンの実装要約する概要オブザーバー パター...

10 HTML テーブル関連タグ

実際、多くの人が「テーブルは絶対に使用すべきではないと聞いたことがある」と言いますが、これは絶対に間...

デザインリファレンス 美しく独創的なブログデザイン

以下にリストされているすべてのブログはオリジナルであり、独自にデザインされています。これらは、他者が...

nginx を使用して同じドメイン名で複数の Vue プロジェクトをデプロイし、リバース プロキシを使用する方法

効果現在、プロジェクトは2つ(project1、project2)あり、nginxに付属するinde...

JavaScript の高度なプログラミングの基本参照型

目次1. 日付2. 正規表現3. オリジナルパッケージタイプ序文:参照値(オブジェクト)は、 Dat...

jsはユーザーのページ操作を記憶するためにクッキーを使用します

序文開発プロセスでは、ブラウザレベルでユーザーが実行した操作を記憶するなど、同様の要件に遭遇すること...

MySQL 結合テーブルと ID 自動増分の例の分析

結合の書き方左結合を使用する場合、左側のテーブルが必ず駆動テーブルになりますか? 2 つのテーブルの...

Windows 10 での MySQL 5.7.17 のインストールと設定方法のグラフィック チュートリアル

この記事では、最新バージョンの MySQL データベース、つまり MySQL 5.7.17 圧縮バー...

Linux で crontab 出力リダイレクトが有効にならない問題の解決方法

質問LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | gre...

MySQL 8.0 における非同期レプリケーションの 3 つの方法について簡単に説明します。

この実験では、空のデータベース、オフライン、オンラインの 3 つのモードで、1 つのマスターと 2 ...

Alibaba Cloud Server への Web プロジェクトのデプロイについて (5 つの手順)

1.まずAlibaba Cloudのウェブサイトにログインしてアカウントを登録し、サーバータイプを...

JavaScript のディープコピーの落とし穴

序文以前、ある会社の面接に行ったとき、面接官から「オブジェクトを深くコピーするにはどうすればよいです...

Docker 経由で Spring Boot アプリケーションを公開およびデプロイするプロセスの分析

目次手動展開1.アイデアを使ってSpring Bootプロジェクトを作成する2. プロジェクトをJa...

CSS3で蓮の花が咲くアニメーション効果を実現

まずは効果を見てみましょう:この効果は非常に華やかに見えますが、原理は複雑ではありません。1 枚の花...