ニコニコ動画みたいに、文字が流れていくものを作成した

はじめに

こんにちは、エンジニアのkeitaMaxです。

ニコニコ動画のように文字が流れていくようなものをJavaScriptで作成したので記事にしました。

内容

class Following {
  constructor(ele) {
    ele.style.overflow = "hidden";
    this.element = ele;
    this.speed = 10;
    this.isRandom = true;
    this.topPx = 0;
    this.fontSize = 20;
  }
  getFinishPx(ele) {
    return ele.clientWidth + ele.offsetLeft;
  }
  setSpeed(speed) {
    this.speed = speed;
  }
  setIsRandom(isRandom) {
    this.isRandom = isRandom;
  }
  setTopPx(topPx) {
    this.topPx = topPx;
  }
  setFontSize(fontSize) {
    this.fontSize = fontSize;
  }

  start(comment) {
    const ele = this.element;
    const divText = document.createElement("div");
    divText.style.position = "relative";
    divText.style.whiteSpace = "nowrap";

    divText.appendChild(document.createTextNode(comment));
    divText.style.fontSize = this.fontSize + "px";
    divText.style.width = "fit-content";
    ele.appendChild(divText);
    //要素追加してから横幅と縦幅を取得する
    var divTextWidth = -1 * divText.scrollWidth;
    divText.style.left = divTextWidth + 1 + "px";

    //TOPPXを設定 画面外に行かないよう＋ランダム
    var topPx = this.topPx;
    if (this.isRandom) {
      topPx = Math.round(Math.random() * ele.clientHeight);
    }
    const maxTopPx = ele.clientHeight - divText.clientHeight;
    if (topPx > maxTopPx) {
      topPx = maxTopPx;
    }
    divText.style.top = topPx + "px";

    //実際に移動させるアニメーション処理
    const finish = this.getFinishPx(ele) + -1 * divTextWidth;
    let start = Date.now();
    let speed = this.speed;
    let timer = setInterval(function () {
      let timePassed = (Date.now() - start) / speed;
      divText.style.left = divTextWidth + timePassed + "px";
      if (timePassed > finish) clearInterval(timer);
    }, 20);
  }
}

export { Following };

このような感じで作成しました！

コードは以下にあります。

使い方

インストール

npm i keitamax-flowing-js

CDN

https://cdn.jsdelivr.net/npm/keitamax-flowing-js@0.0.3/index.cd.js

使用方法

インストールか CDN で読み込んでください。

  var ele = document.getElementsByClassName("example")[0];
  const following = new Following(ele);
  let comment = "こんにちは";
  following.start(comment);

このようにnew Following(ele) 文字を流したい要素をコンストラクタの引数に入れてください。

その後、following.start(comment)のように流したい文字を'start'の引数に入れてください。

文字のスピード設定

following.setSpeed(3)

のように設定します。

数字が大きいほうが遅くなります。

デフォルトでは 10 に設定されています。

ランダムな位置に配置するかどうか

following.setIsRandom(true)

親要素の高さのランダムな位置に配置するかどうかを決めます。

true がランダム、false がランダムではなくなります。

デフォルトでランダムに設定されています。

上からどのくらいに設置するか

following.setTopPx(20)

ランダムな配置が false に設定されているときに、親要素の表示する上からの px を設定します。

親要素よりも大きな値を設定すると、一番下に表示されます。

デフォルトでは 0 になります。

表示するコメントの大きさを設定

following.setFontSize(20)

表示するコメントの大きさを設定します。px 指定になっています。

デフォルトでは 20 担っています。

おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！