如何给WordPress网页添加粒子背景特效?

广告合作

需要广告位置可以直接联系1272345426。

现在购买

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!如发现资源不能下载或者失效请联系QQ1272345426

久全技术网-www.52jqw.cn
久全技术网-www.52jqw.cn
摘要:如何给WordPress网页添加粒子背景特效?只需要简单的加上这一段代码就可以简单的给你的网站加上粒...

教程名称:

如何给WordPress网页添加粒子背景特效?

教程前言:

这是特效只要我们利用:canvas-nest.js脚本实现canvas

使用教程:

下面是粒子背景特效代码

!function(){function o(w,v,i){return w.getAttribute(v)||i}function j(i){return document.getElementsByTagName(i)}function l()
{var i=j("script"),w=i.length,v=i[w-1];return{l:w,z:o(v,"zIndex",-1),o:o(v,"opacity",0.5),c:o(v,"color","255,0,0"),n:o(v,"count",99)}}function k()
{r=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,n=u.height=window.innerHeight||
document.documentElement.clientHeight||document.body.clientHeight}function b(){e.clearRect(0,0,r,n);var w=[f].concat(t);var x,v,A,B,z,y;t.f
orEach(function(i){i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>r||i.x<0?-1:1,i.ya*=i.y>n||i.y<0?-1:1,e.fillRect(i.x-0.5,i.y-0.5,1,1);for(v=0;v<w.length;v++)
{x=w[v];if(i!==x&&null!==x.x&&null!==x.y){B=i.x-x.x,z=i.y-x.y,y=B*B+z*z;y<x.max&&(x===f&&y>=x.max/2&&(i.x-=0.03*B,i.y-=0.03*z),A=(x.max-y)/x.max,e
.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke())}}w.splice(w.indexOf(i),1)})
,m(b)}var u=document.createElement("canvas"),s=l(),c="c_n"+s.l,e=u.getContext("2d"),r,n,m=window.requestAnimationFrame||window.webkitRequestAnimationFrame|
|window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(i){window.setTimeout(i,1000/45)},a=Math.random,f=
{x:null,y:null,max:20000};u.id=c;u.style.cssText="position:fixed;top:0;left:0;z-index:"+s.z+";opacity:"+s.o;j("body")[0].appendChild(u);k(),window.onresize=
k;window.onmousemove=function(i){i=i||window.event,f.x=i.clientX,f.y=i.clientY},window.onmouseout=function(){f.x=null,f.y=null};for(var t=[],p=0;s.n>p;p++)
{var h=a()*r,g=a()*n,q=2*a()-1,d=2*a()-1;t.push({x:h,y:g,xa:q,ya:d,max:6000})}setTimeout(function(){b()},100)}();

注意事项:

添加下面代码到网站标签之前即可,例如

<script src="<?php bloginfo('template_directory'); ?>/js/canvas-nest.min.js"></script>

如果修改颜色----修改js文件里面的opacity、color和count数值即可

未经允许不得转载:作者:久全技术猿, 转载或复制请以 超链接形式 并注明出处 久全技术网
原文地址:《如何给WordPress网页添加粒子背景特效?》 发布于2019-09-20

分享到:
赞(0) 打赏
久全技术网-aidezy.com 久全技术网-www.52jqw.cn
久全技术网-aidezy.com 久全技术网-www.52jqw.cn

评论 抢沙发

3 + 2 =


如何给WordPress网页添加粒子背景特效?

长按图片转发给朋友

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

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.0主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册