Dragon
龙笑天龙笑天  2016-12-18 06:27 龙笑天下 隐藏边栏 |   23 条评论  1,318 
文章评分 10 次,平均分 5.0

很久之前就在咸鱼博客那里看到了这个输入特效,虽然看起来太花哨了点,但我感觉认为这个特效还是挺不错的,值得推荐,毕竟它给我们评论过程增加了点色彩~~

给 WordPress 博客网站添加评论输入打字礼花及震动特效 wordpress

下面龙笑天下就来说说怎么实现的这个礼花及震动特效的,在本站评论处看看效果哦~ PS:震动效果被我关掉了,震的人有点难受...

首先,将下面的 js 代码保存起来,命名 activate-power-mode.js,并上传到主题的 JS 文件夹中(以 Tinection 主题为例,上传到includes/js/中)

/**
 * 给 WordPress 博客网站添加评论输入打字礼花及震动特效
 * https://www.ilxtx.com/comment-input-effects.html
 */
(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);return'hsla('+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}}())}])});

然后,将以下代码添加到主题的 footer.php 文件适当的位置。当然,也可以加一个判断is_singular(),让下面的 js 只在文章页和页面中加载。

<script src="<?php bloginfo('template_directory'); ?>/includes/js/activate-power-mode.js "></script>
<script>
    POWERMODE.colorful = true; // ture 为启用礼花特效
    POWERMODE.shake = false; // false 为禁用震动特效
    document.body.addEventListener('input', POWERMODE);
</script>

友情提示:因为仅涉及 JS,本特效不仅限于 wordpress 中使用哦~

「点点赞赏,手留余香」

还没有人赞赏,快来当第一个赞赏的人吧!

本文为原创文章,版权归所有,欢迎分享本文,转载请保留出处!

龙笑天
龙笑天 关注:32    粉丝:36 最后编辑于:2017-09-13
互助分享,互联网本该如此!

发表评论

表情 贴图 链接 私密 格式 签到
最赞评论
  1. 真我风采
    真我风采 来自天朝的朋友 谷歌浏览器 47.0.2526.108 Windows 7 江苏省徐州市 联通

    节日增加气氛还是比较有用的。

  2. 懿古今
    懿古今 评论达人 LV.1 来自天朝的朋友 谷歌浏览器 45.0.2454.101 Windows 7 广西南宁市 电信

    这个输入特效还是挺不错的,让评论没有那么单调,值得添加

  3. 动感单车
    动感单车 评论达人 LV.3 来自天朝的朋友 谷歌浏览器 45.0.2454.101 Windows XP 广西桂林市 电信

    虽然我也挺喜欢这个效果,但很懒得花时间与精力折腾(虽然这个挺容易操作),二则网页的源码经常变来变去对搜索引擎不友好(SEO 小白的我是这样认为的),所以一直还未使用它(收藏备用吧)。

  1. 雅兮网
    雅兮网 评论达人 LV.1 来自天朝的朋友 谷歌浏览器 45.0.2454.101 Windows 7 广东省珠海市香洲区 电信

    哈哈,这个风靡一时啊,好多博客都添加此功能了

    11楼 2017-01-10 18:08
    0 0 回复
  2. 明月登楼的博客
    明月登楼的博客 评论达人 LV.3 来自天朝的朋友 谷歌浏览器 55.0.2883.87 Windows 10 河南省南阳市 电信

    为啥没有震动呢?张戈博客的震动很酷呀@!

    10楼 2017-01-04 18:08
    0 0 回复
  3. 明月登楼的博客
    明月登楼的博客 评论达人 LV.3 来自天朝的朋友 谷歌浏览器 55.0.2883.87 Windows 10 河南省南阳市 电信

    震动,哪里震动了!没有感觉到呀?

    9楼 2017-01-02 18:29
    0 0 回复
  4. Koolight
    Koolight 评论达人 LV.3 来自天朝的朋友 谷歌浏览器 17.0.558.0 Windows Server 2003 湖北省荆州市 电信

    以前那个动态背景会让手机端很卡,这个礼花效果还好。

    8楼 2016-12-30 13:48
    0 0 回复
  5. 丁春华 来自天朝的朋友 谷歌浏览器 50.0.2661.102 Windows 10 四川省达州市 电信

    这留言特效加得也太给力了。

    7楼 2016-12-23 19:00
    1 0 回复
  6. 九条沟 来自天朝的朋友 火狐浏览器 47.0 Windows 7 陕西省西安市 中移铁通

    这个特效确实牛逼闪闪

    6楼 2016-12-22 21:07
    0 0 回复
  7. 真我风采
    真我风采 来自天朝的朋友 谷歌浏览器 47.0.2526.108 Windows 7 江苏省徐州市 联通

    节日增加气氛还是比较有用的。

    5楼 2016-12-22 16:18
    4 0 回复
  8. 明月登楼的博客
    明月登楼的博客 评论达人 LV.3 来自天朝的朋友 谷歌浏览器 55.0.2883.87 Windows 10 河南省南阳市 电信

    不错,过来点个赞支持一下先!

    4楼 2016-12-22 14:34
    0 0 回复
  9. 动感单车
    动感单车 评论达人 LV.3 来自天朝的朋友 谷歌浏览器 45.0.2454.101 Windows XP 广西桂林市 电信

    虽然我也挺喜欢这个效果,但很懒得花时间与精力折腾(虽然这个挺容易操作),二则网页的源码经常变来变去对搜索引擎不友好(SEO 小白的我是这样认为的),所以一直还未使用它(收藏备用吧)。

    地板 2016-12-21 14:15
    2 0 回复
  10. 马洪飞博客
    马洪飞博客 来自天朝的朋友 谷歌浏览器 55.0.2883.75 Windows 10 北京市 联通

    这个不错啊哈哈

    板凳 2016-12-20 09:21
    0 0 回复
  11. 懿古今
    懿古今 评论达人 LV.1 来自天朝的朋友 谷歌浏览器 45.0.2454.101 Windows 7 广西南宁市 电信

    这个输入特效还是挺不错的,让评论没有那么单调,值得添加

    沙发 2016-12-19 22:31
    3 0 回复
扫一扫二维码分享