{"id":22830881,"url":"https://github.com/mantoufan/yzhandanmu","last_synced_at":"2025-04-07T09:20:38.202Z","repository":{"id":38194598,"uuid":"52533186","full_name":"mantoufan/yzhanDanmu","owner":"mantoufan","description":"CSS-only bullet screen plugin. Any height, length, speed. Multiple non-overlapping strategies. High efficiency, minimal size (2kb). Channel algorithm patented. 纯 CSS 弹幕插件，任意高度、长度、速度弹幕铺满屏幕，多种不重叠策略，高效极简（2kb）。通道算法受专利权保护。","archived":false,"fork":false,"pushed_at":"2023-03-16T03:33:39.000Z","size":275,"stargazers_count":269,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-04T07:11:19.566Z","etag":null,"topics":["bullet-screen","comments","danmu","yzhan1kb"],"latest_commit_sha":null,"homepage":"https://mantoufan.github.io/yzhanDanmu/demo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mantoufan.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-02-25T14:56:39.000Z","updated_at":"2025-04-03T14:53:04.000Z","dependencies_parsed_at":"2025-02-14T12:11:18.242Z","dependency_job_id":"2469fd1e-dfd3-4a91-af12-f769f43ad8b3","html_url":"https://github.com/mantoufan/yzhanDanmu","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mantoufan%2FyzhanDanmu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mantoufan%2FyzhanDanmu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mantoufan%2FyzhanDanmu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mantoufan%2FyzhanDanmu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mantoufan","download_url":"https://codeload.github.com/mantoufan/yzhanDanmu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247622983,"owners_count":20968575,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bullet-screen","comments","danmu","yzhan1kb"],"created_at":"2024-12-12T20:15:48.989Z","updated_at":"2025-04-07T09:20:38.183Z","avatar_url":"https://github.com/mantoufan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Y 站弹幕插件 Y station barrage plug-in\n\n![npm](https://img.shields.io/npm/v/yzhandanmu)\n![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/yzhandanmu/latest)\n![npm](https://img.shields.io/npm/dt/yzhandanmu)\n![ie10+](https://img.shields.io/badge/IE-10%2B-skyblue)  \nY 站弹幕插件，适应任意高度、长度、速度弹幕，支持多种不重叠策略  \nCSS 3 动画，高效极简(**2kB**)，兼容绝大多数设备和 IE10+   \nY station barrage plug-in, suitable for barrages of any height, length and speed  \nCSS 3 animation, 2kB size, compatible with most devices and IE10+\n\n### Preview 预览\n\n![Y 站弹幕插件预览图 Y station barrage plug-in Preivew GIF](https://files.catbox.moe/2cg33c.gif)\n\n### Quick Start 快速开始\n\n#### Node.js\n\n```javascript\nnpm i yzhandanmu\nimport YZhanDanMu from 'yzhandanmu'\n```\n\n#### Browser\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/yzhandanmu/dist/yzhandanmu.min.js\"\u003e\u003c/scirpt\u003e\n```\n\n#### Demo 演示\n\n- Native Javascipt\n  Demo: https://mantoufan.github.io/yzhanDanmu/demo/\n- React with styled-components\n  Demo: https://mantoufan.github.io/yzhanDanmu/demo/react.html\n\nIt could be used with any JS / TS Library 可以与任意 JS 和 TS 库搭配使用\n\n### API\n\n```javascript\n/** Step 1 Initialize */\nconst yZhanDanMu = new YZhanDanMu({\n  p: document.getElementById('app') // Select an element on the page as the container\n})\n/** Step 2 Create Barrage */\n// Native JS\nconst o = document.createElement('DIV')\no.innerText = 'Text'\n// React\nconst o = ReactDOM.render(\u003cdiv\u003eText\u003c/div\u003e, document.createDocumentFragment())\n/** Step 3 Add Barrage to the container */\nyZhanDanMu.add(o, {\n  duration: 2000, // ms，Barrage display time\n  speed: .2, // px / ms, Barrage display speed, it will override the duration, keep barrages of different lengths at the same speed\n  prior: 'time' /** Display strategy of new barrage when Barrage is full:\n  1. time - Barrage will appear on time, even if it overlaps\n  2. nooverlap - Barrage will be delayed until a space is available\n  3. nooverlap-highest - Barrage will be delayed until a space is available as soon as possible\n  */\n}\n/** Step 4 destroy */\nyZhanDanMu.destroy()\n```\n\n### Features 功能\n\n- Adapt to barrage at any height and length  \n弹幕高度、长度任意\n- Barrage can be displayed at a fixed time or at a fixed speed (uniform speed)  \n弹幕可以固定时间或固定速度（匀速）显示\n- When the barrage is full, multiple priority strategies can be added to the new barrage  \n弹幕全满时，新弹幕添加可选多种优先策略\n  - time - Barrage will appear on time, even if it overlaps  \n  时间优先：弹幕将准时出现，即使会重叠\n  - nooverlap - Barrage will be delayed until a space is available  \n  不重叠优先：弹幕将延迟出现，直到找到空位\n  - nooverlap-highest - Barrage will be delayed until a space is available as soon as possible  \n  不重叠优先之最高优先级：弹幕将延迟出现，直到找到空位，并且会尽快\n- Automatic power saving  \n自动省电\n  - On devices that support automatic power saving, when the current window is not active, slow down or stop running  \n  支持自动省电的设备上，当前窗口不活跃时，降速或停止运行\n\n### Patent Right 专利权\n\nThe application channel algorithm of the plug-in has obtained the patent right of Chinese invention and is under protection  \n本插件应用通道算法已获得中国发明专利权，正处于保护期间\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmantoufan%2Fyzhandanmu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmantoufan%2Fyzhandanmu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmantoufan%2Fyzhandanmu/lists"}