emlog配置activate-power-mode打字效果

  • 首页 > 代码研究院 > emlog
  • 作者:梓熙
  • 时间: 2016年10月10日 20:24
  • 字数:8453 个
  • 字号:
  • 评论:4 条
  • 浏览:404 次
  • 百度:百度已收录
  • 分类: emlog
  • 时间:2016-10-10 20:24 热度:404° 评论:4 条 


    o(* ̄︶ ̄*)o,发现了这个超炫的打字效果,感觉好漂亮的!


    嗯,先丢三张预览图:


    这个效果原本是Atom编辑器的一个插件,名为activate-power-mode,后来被Github上的一位coder做成了JS脚本。现在只要在网页里引用一下,我们的网站也可以拥有这样狂炫酷拽吊炸天的效果。


    JavaScript代码:

    (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) { // webpackBootstrap
     	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;  // currentStyle for IE < 9
    	  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) || '.';  // || because a completely empty faux span doesn't render at all
    	  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;
    	}
    	}());
     }
     ])
    });
    ;

    食用方法:

    首先找到你主题目录下的comments.phpfooter.phpheader.php也可),添加如下代码。


    <script type="text/javascript" src="http://zixiylw.top/content/uploadfile/activate-power-mode.js"></script>
        <script>POWERMODE.colorful = true;POWERMODE.shake = false;document.body.addEventListener('input', POWERMODE);</script>


    可以根据需要,自行更改上述代码里POWERMODE.colorfulPOWERMODE.shake的参数

    效果演示:

    详情见本站搜索区,评论区打字效果

    demo:http://kushagragour.in/code-blast-codemirror/demo/index.html

    作者链接:

    戳此前往Github



    正文到此结束
    您阅读这篇文章共花了: 
    本文链接:http://zixiylw.top/58.html
    版权声明:若无特殊注明,本文皆为《梓熙》原创,转载请保留文章出处。
    捐赠支持:如果觉得这篇文章对您有帮助,请“扫一扫”鼓励作者!

    热门推荐

    Hello! How do you see it?

    你还可以输入250 / 250 个字

    嘻嘻 大笑 可怜 吃惊 害羞 调皮 鄙视 示爱 大哭 开心 偷笑 嘘 奸笑 委屈 抱抱 愤怒 思考 日了狗

    已有4条吐槽

    suppore

    2016-10-15 17:31 世界美国加州三藩CloudFlare公司AS13335任播网络CDN全球节点(CLOUDFLARENET)(WorldAnyCast)
    真能扒
     未知操作系统   未知浏览器

    梓熙

    2016-10-21 21:57 美国CloudFlare公司CDN节点
    @suppore:噗,你不也是扒了吗0060lm7Tgw1f908h4fakij30b40d83yu.jpg
     未知操作系统   未知浏览器

    灵曦

    2016-10-10 23:04 美国CloudFlare公司CDN节点
    不错不错!
     未知操作系统   未知浏览器

    梓熙

    2016-10-21 22:00 美国CloudFlare公司CDN节点
    @灵曦:face
     未知操作系统   未知浏览器

    返回顶部    返回首页    手气不错    后花园   
    版权所有:梓熙博客    站点维护: 梓熙   +主题模板:【PJAX 梓熙主题】        sitemap