c-rain

code rain background (代码雨背景)

效果图

安装

npm i c-rain

全局引入

<script stc="https://unpkg.com/c-rain/dist/index.js"></script>

使用

import CodeRain from 'c-rain';
// or
// <script stc="https://unpkg.com/c-rain/dist/index.js"></script> 全局暴露了CodeRain类

/**
 * 参数 options 可选（或部分传入）
 * @code 随机下落的字符
 * @fontSize 下落字符的字体大小
 * @textColor 字符的字体颜色
 * @bgColor 背景颜色
 * @initBgColor 初始背景颜色，防止初次渲染时闪动
 * @gap 字符的左右间隙，screen.availWidth / gap = 字符列数
 * @speed 字符下落速度
 */
/**
 * 默认参数
  {
    code: 'Hello World',
    fontSize: 16,
    textColor: '#0f0',
    bgColor: 'rgba(0,0,0,0.05)',
    initBgColor: 'rgba(0,0,0)',
    gap: 15,
    speed: 10,
  }
 */
const codeRain = new CodeRain(options);

// 实例方法
// 开始背景雨效果
codeRain.start();
// 暂停背景雨效果，start()可恢复
codeRain.stop();
// 改变选项属性，实时变化背景雨效果
codeRain.change(options);
// 清除背景雨效果
codeRain.clear();