Canvas-nest.js - 网页粒子背景插件

Canvas-nest.js - 网页粒子背景插件

更新: 2018-07-31

阅读:315

开源:GitHub

Canvas-nest.js是一个非常好看的网页粒子背景插件,不需要依赖任何第三方库即可运行,提供额非常炫酷的背景。

特性

不依赖任何框架或者内库,比如不依赖 jQuery,使用原生的 javascript。
非常小,只有1.6 kb,如果开启 gzip,可以更小。
非常容易实现,配置简单,即使你不是web开发者,也能简单搞定。

使用方法

使用非常简单,感觉都没有必要写这一节内容。

将下面的代码插入到<body></body> 之间.

<script type="text/javascript" src="/canvas-nest.min.js"></script>
强烈建议在 </body> 标签上方. 

请注意不要将代码置于 <head>...</head>里面.
然后就完成了,打开网页即可看到效果!


配置和配置项

color: 线条颜色, 默认: '0,0,0' ;三个数字分别为(R,G,B),注意用,分割
opacity: 线条透明度(0~1), 默认: 0.5
count: 线条的总数量, 默认: 150

zIndex: 背景的z-index属性,css属性用于控制所在层的位置, 默认: -1

这些属性配置在引用js的script标签中,作为它的一个属性值。所有的配置项都有默认值,如果你不知道怎么设置,可以先不设置这些配置项,就使用默认值看看效果也可以的。

Example:

<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="/canvas-nest.min.js"></script>

这些属性配置在引用 js 的 script 标签中,作为它的一个属性值。所有的配置项都有默认值,如果你不知道怎么设置,可以先不设置这些配置项,就使用默认值看看效果也可以的。

或者模块化调用的时候,config 参数写成:

{
  color: '0,0,255',
  opacity: 0.7,
  zIndex: -2,
  count: 99,
};




热门推荐