Skip to content

zhaihaoran/digital-rain

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

digital-rain

matrix

digital is a plugin for showing the matrix digital rains

  • light : only 100 lines source code and have no dependency
  • plentiful : there are over 15 configuration items for developers to customize situations
  • annotation : clear annotation for others to read and revise

Examples

see the demo;

<body>
    <canvas id="canvas"></canvas>
    <script src="digital.js"></script>
    <script>
        new Digital({
            ele: "#canvas"
        });
    </script>
</body>

API

const defaults = {
    ele: "", // dom节点
    hidenRate: 0.025, // 字符消失速度
    letters: "123456789!@#$%^&*~ABCDEFGHIJKLMNOPQRSTUVWXYZ", // 字符集
    fallRate: 65, // 字符掉落速度
    textDir: "ltr", // 字母方向
    letterSpace: 60, // 列之间的落差范围
    isMustTop: true, // 是否从最顶端开始下落,false的话为随机出现
    mode: "window", // window | inherit
    linePercent: 1, // 0~1 在哪里截止,默认为最底端
    font_size: 20, // 列宽度 字体宽度
    firstLetterColor: "#FFF", // 首字符颜色
    letterColor: "#6D2", // 字符流的颜色
    background: "#000",
    width: 600, // canvas 宽度
    height: 600 // canvas 高度
}

Event

document.querySelector('#canvas').addEventListener('click',function(){
    if (digital._state) {
        digital.stop();
    } else {
        digital.start();
    }
})

About

a complete configurable plugin to show the matrix digital rain

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published