Danmaku Text 弹幕文字
One message every 800ms flying right to left at 2px per frame, removed once it clears the left edge. 每 800ms 一条,每帧向左移 2px,出了左边界就销毁。
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 文件就能跑,不需要任何库。