网页点线交互式动态特效-Canvas-Nest.js

发布于 2019-08-03  167 次阅读


Canvas-Nest.js是一个很有趣好康的交互式动态特效,本站也使用了这个特效。同时它的使用方法非常简单,只需要将它的js插在<body>里面就可以了。

Canvas-Nest.js可以在 Interactive Particle / Nest System With JavaScript and Canvas, no jQuery. 直接下载到,同时里面有详细的使用介绍。

最简单的一句话引用:

<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-1" count="99" src="https://unpkg.com/canvas-nest.js@2.0.4/dist/canvas-nest.js"></script>

Tag说明:

color:线条颜色,RGB值:(R,G,B)。(注意:使用','分隔。)
pointColor:点的颜色,RGB值:(R,G,B)。(注意:使用','分隔。)
opacity:线条的不透明度(0~1)。
count:数量,默认值:99。
zIndex:背景的z-index属性,默认值:-1。

除了这个引用方法以外,Canvas-Nest.js还有一个wp插件,但是该插件非常老旧,启用后虽然可以正常显示,但是无法进入设置页面,无法设置相关参数。这里说一下如果要使用该插件,该如何通过手动的方式来修改参数并隐藏失效的wp后台导航标签。

  1. 进入wp的插件相关目录,找到该插件的目录并进入。
  2. 打开插件主目录的setting.php,修改第55行、第57行、第59行、第61行的默认配置可以分别设置线条颜色、不透明度、数量和z-index属性。
  3. 保存。

到这一步的时候颜色之类的设置已经生效,但是wp后台的左侧导航栏的设置菜单里还有一个失效的标签,我们可以通过 Admin Menu Editor 这个wp插件来编辑后台左侧导航栏。

操作过程很简单在此不多赘述。

当然,除了这个迷惑的方法之外,也可以将上面那句script直接通过wp的主题编辑器直接插入到footer.php里面。


猫の手も借りたいほどだ