为评论界面增添烟花效果

最近在浏览一些博客时，发现许多站点的评论区都有炫酷的烟花特效和震动效果。因此，我进行了一些搜索，发现实现这些特效的方法相当简单。接下来，我将分享如何为 WordPress 评论框添加烟花和震动特效的具体步骤。

烟花特效JS文件下载：

实现烟花特效的关键在于这个 JS 文件。你可以选择将下面的代码复制并新建一个 JS 文件，或者直接点击这里下载：activate-power-mode.zip。

(function webpackUniversalModuleDefinition(root,factory){if(typeof exports===object&&typeof module===object)module.exports=factory();else if(typeof define===function&&define.amd)define([],factory);else if(typeof exports===object)exports["POWERMODE"]=factory();else root["POWERMODE"]=factory()})(this,function(){return(function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={exports:{},id:moduleId,loaded:false};modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);module.loaded=true;return module.exports}__webpack_require__.m=modules;__webpack_require__.c=installedModules;__webpack_require__.p="";return __webpack_require__(0)})([function(module,exports,__webpack_require__){use strict;var canvas=document.createElement(canvas);canvas.width=window.innerWidth;canvas.height=window.innerHeight;canvas.style.cssText=position:fixed;top:0;left:0;pointer-events:none;z-index:999999;window.addEventListener(resize,function(){canvas.width=window.innerWidth;canvas.height=window.innerHeight});document.body.appendChild(canvas);var context=canvas.getContext(2d);var particles=[];var particlePointer=0;POWERMODE.shake=true;function getRandom(min,max){return Math.random()*(max-min)+min}function getColor(el){if(POWERMODE.colorful){var u=getRandom(0,360);returnhsla(+getRandom(u-10,u+10)+, 100%, +getRandom(50,80)+%, +1+)}else{return window.getComputedStyle(el).color}}function getCaret(){var el=document.activeElement;var bcr;if(el.tagName===TEXTAREA||(el.tagName===INPUT&&el.getAttribute(type)===text)){var offset=__webpack_require__(1)(el,el.selectionStart);bcr=el.getBoundingClientRect();return{x:offset.left+bcr.left,y:offset.top+bcr.top,color:getColor(el)}}var selection=window.getSelection();if(selection.rangeCount){var range=selection.getRangeAt(0);var startNode=range.startContainer;if(startNode.nodeType===document.TEXT_NODE){startNode=startNode.parentNode}bcr=range.getBoundingClientRect();return{x:bcr.left,y:bcr.top,color:getColor(startNode)}}return{x:0,y:0,color:transparent}}function createParticle(x,y,color){return{x:x,y:y,alpha:1,color:color,velocity:{x:-1+Math.random()*2,y:-3.5+Math.random()*2}}}function POWERMODE(){{var caret=getCaret();var numParticles=5+Math.round(Math.random()*10);while(numParticles--){particles[particlePointer]=createParticle(caret.x,caret.y,caret.color);particlePointer=(particlePointer+1)%500}}{if(POWERMODE.shake){var intensity=1+2*Math.random();var x=intensity*(Math.random()>0.5?-1:1);var y=intensity*(Math.random()>0.5?-1:1);document.body.style.marginLeft=x+px;document.body.style.marginTop=y+px;setTimeout(function(){document.body.style.marginLeft=;document.body.style.marginTop=},75)}}};POWERMODE.colorful=false;function loop(){requestAnimationFrame(loop);context.clearRect(0,0,canvas.width,canvas.height);for(var i=0;i<particles.length;++i){var particle=particles[i];if(particle.alpha<=0.1)continue;particle.velocity.y+=0.075;particle.x+=particle.velocity.x;particle.y+=particle.velocity.y;particle.alpha*=0.96;context.globalAlpha=particle.alpha;context.fillStyle=particle.color;context.fillRect(Math.round(particle.x-1.5),Math.round(particle.y-1.5),3,3)}}requestAnimationFrame(loop);module.exports=POWERMODE},function(module,exports){(function(){var properties=[direction,boxSizing,width,height,overflowX,overflowY,borderTopWidth,borderRightWidth,borderBottomWidth,borderLeftWidth,borderStyle,paddingTop,paddingRight,paddingBottom,paddingLeft,fontStyle,fontVariant,fontWeight,fontStretch,fontSize,fontSizeAdjust,lineHeight,fontFamily,textAlign,textTransform,textIndent,textDecoration,letterSpacing,wordSpacing,tabSize,MozTabSize];var isFirefox=window.mozInnerScreenX!=null;function getCaretCoordinates(element,position,options){var debug=options&&options.debug||false;if(debug){var el=document.querySelector(#input-textarea-caret-position-mirror-div);if(el){el.parentNode.removeChild(el)}}var div=document.createElement(div);div.id=input-textarea-caret-position-mirror-div;document.body.appendChild(div);var style=div.style;var computed=window.getComputedStyle?getComputedStyle(element):element.currentStyle;style.whiteSpace=pre-wrap;if(element.nodeName!==INPUT)style.wordWrap=break-word;style.position=absolute;if(!debug)style.visibility=hidden;properties.forEach(function(prop){style[prop]=computed[prop]});if(isFirefox){if(element.scrollHeight>parseInt(computed.height))style.overflowY=scroll}else{style.overflow=hidden}div.textContent=element.value.substring(0,position);if(element.nodeName===INPUT)div.textContent=div.textContent.replace(/s/g,"u00a0");var span=document.createElement(span);span.textContent=element.value.substring(position)||.;div.appendChild(span);var coordinates={top:span.offsetTop+parseInt(computed[borderTopWidth]),left:span.offsetLeft+parseInt(computed[borderLeftWidth])};if(debug){span.style.backgroundColor=#aaa}else{document.body.removeChild(div)}return coordinates}if(typeof module!="undefined"&&typeof module.exports!="undefined"){module.exports=getCaretCoordinates}else{window.getCaretCoordinates=getCaretCoordinates}}())}])});

具体实现步骤：

将下载的 JS 文件上传到你的网站，可以放置在主题文件夹或任何你习惯的位置。

接下来，编辑主题的页脚文件 (footer.php)，在其中添加以下代码：

<?php if (is_single() || is_page() ) { ?> <script src="<?php bloginfo(template_directory); ?>/js/activate-power-mode.js "></script>  <script> POWERMODE.colorful = true; POWERMODE.shake = false; document.body.addEventListener(input, POWERMODE); </script> <?php }?>

如果不确定代码的添加位置，可以将其放置在 </body> 标签之前。同时，如果你将 JS 文件放在了其他位置，请务必修改 src 属性中的路径。

以上方法取自于良未遂。

此外，我还分享了另一篇关于为 WordPress 添加网页背景特效的文章，感兴趣的朋友可以查看：给 WordPress 网站添加线段吸附鼠标特效。