Add Line Segment Mouse Attraction Effect to WordPress Website

If you often browse the blogosphere, you must have seen some blogs with many lines in the background that follow your mouse pointer. How is this effect achieved? It's simple, just call a js file. This js file is small, so don't worry about performance impact. The effect is as follows:

Code version usage method

Copy the following code and save it as a js file, you can also directlyDownload from GithubNote: This code can be used on all websites, not just 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}))}();

Assuming the file you saved is canvas-nest.js and uploaded to the dist folder on the server. Then, add the following code before the <\/body> tag in the footer.php file of your WordPress website.

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

Custom display effect

color: line color, default: '0,0,0'; the three numbers are (R,G,B), note to separate with , pointColor: intersection point color, default: '0,0,0'; the three numbers are (R,G,B), note to separate with , opacity: line transparency (0~1), default: 0.5 count: total number of lines, default: 150 zIndex: the z-index property of the background, a CSS property used to control the layer position, default: -1 For example, like below

Note: All configuration items have default values. If you don't know how to set them, you can first not set these configuration items and just use the default values to see the effect. If you find the code version difficult, you can also use the Plugin version.

WordPress Canvas plugin download

canvas-nest.js is a very cool open-source project on Github. The project uses less than 2kb of Javascript code to create a very cool webpage background effect. The project address is: https://github.com/aTool-org/canvas-nest.js This WordPress Plugin is another open-source project completed using the above project (https://github.com/aTool-org/canvas-nest-for-wp). This project is a WordPress Plugin and has been published on the official wordpress.org website. Plugin download address:https://wordpress.org/plugins/canvas-nestjs/

Add typing fireworks effect to comment section

Besides the webpage background effect, you may have also noticed the fireworks typing effect in this blog's comment section. If you haven't noticed, you can try commenting. The implementation method is very simple, see:Add Fireworks ???? Effect to WordPress Comment Interface