CSS-only bullet screen plugin. Any height, length, speed. Multiple non-overlapping strategies. High efficiency, minimal size (2kb). Channel algorithm patented. 纯 CSS 弹幕插件,任意高度、长度、速度弹幕铺满屏幕,多种不重叠策略,高效极简(2kb)。通道算法受专利权保护。
Y 站弹幕插件,适应任意高度、长度、速度弹幕,支持多种不重叠策略
CSS 3 动画,高效极简(2kB),兼容绝大多数设备和 IE10+
Y station barrage plug-in, suitable for barrages of any height, length and speed
CSS 3 animation, 2kB size, compatible with most devices and IE10+
npm i yzhandanmu
import YZhanDanMu from 'yzhandanmu'
<script src="https://cdn.jsdelivr.net/npm/yzhandanmu/dist/yzhandanmu.min.js"></scirpt>
It could be used with any JS / TS Library 可以与任意 JS 和 TS 库搭配使用
/** Step 1 Initialize */
const yZhanDanMu = new YZhanDanMu({
p: document.getElementById('app') // Select an element on the page as the container
})
/** Step 2 Create Barrage */
// Native JS
const o = document.createElement('DIV')
o.innerText = 'Text'
// React
const o = ReactDOM.render(<div>Text</div>, document.createDocumentFragment())
/** Step 3 Add Barrage to the container */
yZhanDanMu.add(o, {
duration: 2000, // ms,Barrage display time
speed: .2, // px / ms, Barrage display speed, it will override the duration, keep barrages of different lengths at the same speed
prior: 'time' /** Display strategy of new barrage when Barrage is full:
1. time - Barrage will appear on time, even if it overlaps
2. nooverlap - Barrage will be delayed until a space is available
3. nooverlap-highest - Barrage will be delayed until a space is available as soon as possible
*/
}
/** Step 4 destroy */
yZhanDanMu.destroy()
The application channel algorithm of the plug-in has obtained the patent right of Chinese invention and is under protection
本插件应用通道算法已获得中国发明专利权,正处于保护期间