lolongwell / danmu-wall

弹幕墙

弹幕墙

"弹幕墙"是许多视频网站(比如国内的B站Bilibili)上新增的一种有趣的功能, 这个小页面就是对这种功能的简单模拟, 其中内置了一些网上流行的弹幕或吐槽语句.

主要功能/特色:

1.你可以在输入框中随意输入吐槽内容或者点击左侧的"快捷输"选定某一条流行语, 然后点击"发送"按钮, 即可完成弹幕上墙。此处对一种特殊情形进行了设定: 当你未输入或选定任何吐槽内容而直接点击"发送"按钮时, 输入框中的提示性文字"我要吐槽 ..."会被直接发送至弹幕墙;

2.默认情况下吐槽语句会以随机字号和颜色展示在弹幕墙上, 你也可以点击右侧的"字号"和"颜色"来进行指定;

3.一旦新的吐槽语句被发送至弹幕墙, 它会在其上从左侧缓慢移动到右侧, 循环往复, 这主要是通过CSS3的动画属性实现的;

4.一个小的特色:弹幕墙加入了由灰色到青色的呼吸灯效果;

5.这个小页面引入了BootStrap框架且应用了CSS3媒体查询, 实现了大部分平台及不同屏幕尺寸上的响应式设计(已在谷歌浏览器开发者工具中模拟测试);

这个小页面是我自学前端时实践的一个小项目, 实现起来并不难, 您可以进入我的网站DEMO展示页-弹幕墙查看在线效果, 随时欢迎您提出任何问题,建议或反馈 :)

DANMU

"Danmu Wall" (also known as Bullet Screen) is an intersting phenomenon in several video websites such as bilibili.com in China, this demo was a simple implemention of such function, in which several popular "Tu Cao" (splitslots) were collected and quoted from the websites.

Main Functions/Features:

1.Splitslots can be either typed freely in the input box or selected from "Fast Input" with several popular splitslots by default, after inputting or selecting a splitslot, you can click "Send" button to launch it to the wall, as a special case, if you hit the "SEND" button while the input box is empty, the placeholder "I wanna comment ..." will be launched directly;

2.By default the splitslots are in random "font-sizes" and "colors" when launched, you can also click the buttons "Font-size" and "Font-color" to choose a specific "font-size" and "color" seperately as you like;

3.Once a new splitslot was sent to the wall, it will move from the left side to the right side on the wall repeatedly, this was achieved mainly by CSS3 animations feature;

4.As a small characteristic, the wall was endowed with Breathing Effect with cyan flickering;

5.The demo has been applied with BootStrap Framework and CSS media query to achieve responsive designs in most platforms and different size of screens, which have been simulated and tested in Chrome developer tools.

This Demo is very simple since it's one of my practicing projects when learning Front-end Developments from scratch, it can be viewed @ My Website Demo Page-Danmu . Any issues or bugs report are always welcome, helpful commits will be much appreciated :)