WordPressサイトに線分がマウスに吸着するエフェクトを追加する

如果你经常逛博客圈，那么你肯定看到过有些博客的背景有很多的线条，会跟着你鼠标指针进行吸附。这个特效是怎么弄出来的呢？很简单，调用搞一个js文件就可以了。这个js文件很小巧，所以不用担心对性能产生影响。 效果如下：

代码版使用方法

把下面这串代码复制了保存为一个js文件，你也可以直接去Github下载 注：这个代码所有网站都可以使用，并非只有WordPress。

!function(){"use strict";function e(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function t(e,t){return e(t={exports:{}},t.exports),t.exports}var n=t(function(e,t){Object.defineProperty(t,"__esModule",{value:!0});var n=1;t.default=function(){return""+n++},e.exports=t.default});e(n);var o=t(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:30,n=null;return function(){for(var o=this,i=arguments.length,r=Array(i),a=0;an||r.x<0?-1:1,r.ya*=r.y>o||r.y<0?-1:1,t.fillStyle="rgba("+e.c.pointColor+")",t.fillRect(r.x-.5,r.y-.5,1,1),u=f+1;u=s.max/2&&(r.x-=.03*l,r.y-=.03*d),c=(s.max-v)/s.max,t.beginPath(),t.lineWidth=c/2,t.strokeStyle="rgba("+e.c.color+","+(c+.2)+")",t.moveTo(r.x,r.y),t.lineTo(s.x,s.y),t.stroke()))}),this.requestFrame(this.drawCanvas)}},{key:"destroy",value:function(){l(this.el),window.onmousemove=this.onmousemove,window.onmouseout=this.onmouseout,f(this.tid),this.canvas.parentNode.removeChild(this.canvas)}}]),e}();y.version="2.0.4";var w,b;new y(document.body,(w=document.getElementsByTagName("script"),{zIndex:(b=w[w.length-1]).getAttribute("zIndex"),opacity:b.getAttribute("opacity"),color:b.getAttribute("color"),pointColor:b.getAttribute("pointColor"),count:Number(b.getAttribute("count"))||99}))}();

假设你保存的文件是canvas-nest.js，上传到服务器的dist文件夹下面的。 然后在你WordPress网站的页脚footer.php文件之前添加下面这串代码。

<script type="text/javascript" src="dist/canvas-nest.js">script>

自定义显示效果

color: 线条颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用,分割 pointColor: 交点颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用,分割 opacity: 线条透明度（0~1）, 默认: 0.5 count: 线条的总数量, 默认: 150 zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1 例如下面这样

注意: 所有的配置项都有默认值，如果你不知道怎么设置，可以先不设置这些配置项，就使用默认值看看效果也可以的。 如果你觉得代码版本的很难，你也可以使用插件版

WordPress Canvas插件下载

canvas-nest.js是github上一个很炫酷的开源项目，项目使用不到2kb的Javascript代码构造一个很炫酷的网页背景效果，项目地址为：https://github.com/aTool-org/canvas-nest.js 本wordpress插件是利用上述项目完成的另外一个开源项目（https://github.com/aTool-org/canvas-nest-for-wp），这个项目是一个wordpress插件，并且发布到wordpress.org官网上。 插件下载地址：https://wordpress.org/plugins/canvas-nestjs/

给评论区添加打字烟花效果

除了网页背景特效外，你可能也注意到本博客评论区打字有烟花特效，没注意的话你可以去评论试试看。 实现方法很简单，参见：WordPressコメントインターフェースに花火????エフェクトを追加