canvas-nest.js 网页背景特效鼠标跟随吸附线条散漫原子

canvas-nest.js 网页背景特效鼠标跟随吸附线条散漫原子

一个非常赞的网页背景效果——canvas-nest

canvas-nest.js

一个基于html5 canvas绘制的网页背景效果,非常赞!https://github.com/hustcc/canvas-nest.js

特性

  • 不依赖任何框架或者内库,比如不依赖jQuery,使用原生的javascript。

  • 非常小,只有1.79kb,如果开启gzip,可以更小。

  • 非常容易时间,配置简单,即使你不是web开发者,也能简单搞定。

使用

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

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

<script type="text/javascript" src="//github.atool.org/canvas-nest.min.js"></script>

强烈建议在 </body>标签上方. 例如下面的代码结构:

<html>
<head>
    ...
</head>
<body>
    ...
    ...
    ...
    <script type="text/javascript" src="//github.atool.org/canvas-nest.min.js"></script>
</body
</html>

请注意不要将代码置于 <head> </head>里面.

然后就完成了,打开网页即可看到效果!

配置和配置项

  • color: 线条颜色, 默认: ‘0,0,0’ (R,G,B)

  • opacity: 线条透明度, 默认(0~1): 0.5

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

Example:

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

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

其他

本项目的Javascript文件已经存储在CDN上,可以直接使用,地址为:http://github.atool.org/canvas-nest.min.js,如果你不需要CDN或者有自己的CDN,可以直接下载源码中的 canvas-nest.min.js,然后相应的修改使用地址即可。


赞(52) 打赏
未经允许不得转载:优客志 » 前端设计
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏