✨Effect Lab
Read the full guide完整技术长文 Text that moves: typing, per-character animation, and the terminal rain会动的文字:打字、逐字动画与终端数字雨
📺

Danmaku Text 弹幕文字

One message every 800ms flying right to left at 2px per frame, removed once it clears the left edge. 每 800ms 一条,每帧向左移 2px,出了左边界就销毁。

DOMNegative velocitySelf cleanup
Live demo实时演示

Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。

How it works原理拆解

Each message starts at x = container width and decrements by 2 per frame; the loop stops when x passes -200, which accounts for the text's own width so nothing disappears mid-word. Vertical position is a random percentage between 10% and 90%, which keeps lanes from colliding too often. 每条消息从容器宽度开始,每帧减 2;x 越过 -200 才停,这个余量是为了照顾文字自身的宽度,免得字还没走完就消失。纵向位置是 10%–90% 的随机百分比,这样轨道之间不容易撞车。

What to change可以改的地方

  • 1Randomise speed between 2 and 5 so messages overlap like a real comment stream.
  • 2Snap the vertical position to fixed lanes to make the effect look like a broadcast overlay.
  • 1速度随机在 2–5 之间,就会出现真实的「叠弹幕」。
  • 2纵向位置吸附到固定轨道,立刻变成电视台那种字幕条。

Source code源码

Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。

danmaku.html