Skip to content

Latest commit

 

History

History
45 lines (41 loc) · 1.69 KB

README.md

File metadata and controls

45 lines (41 loc) · 1.69 KB

rainbow-particles

炫酷粒子特效,适合用于个人网页或其它非正式页面

效果可以参考我的个人站点:http://bingchacha.top/

首先你得在界面上设置一个全屏canvas元素,然后引入js文件:

<script src="./main.js"></script>
  • 如果想全部使用默认配置则可以直接什么都不设置:
   let myRainbow = new Rainbow();
   myRainbow.init();
  • 或者使用提供的配置项,使用默认参数的可以直接不写
   let myRainbow = new Rainbow({
     max_age : 2000,
     part_count : 1000,
     frame_rate : 1,
     top_left_color : 'rgb(204,0,255)',
     top_right_color : 'rgb(0,255,255)',
     bottom_left_color : 'rgb(255,112,12)',
     bottom_right_color : 'rgb(255,10,130)'
   })
   myRainbow.init();

解释一下配置项的各参数:

   let myRainbow = new Rainbow({
     max_age : 粒子可达的最长寿命,也就是粒子的最大历程,此值越大,粒子的平均路径越长,
     part_count : 一簇粒子的数量,界面总粒子数为此值*4,注意过大会卡顿,
     frame_rate : 粒子在一帧内可达的路径距离,视效上来说,此值越大/小,粒子速度越快/,
     top_left_color : 上左簇粒子颜色,可以用rgb形式或十六进制(必须是字符串),下同,
     top_right_color : 上右簇粒子颜色,
     bottom_left_color : 下左簇粒子颜色,
     bottom_right_color : 下右簇粒子颜色
   })

可以自己搭配出各种效果以及色彩,这里就随便放几张图吧~

个人站点主页 纯粒子效果 黑白色系