Emlog打字特效代码,仿Atom编辑器打字特效

博主在别人博客看到评论打字特效,觉得好看,网上找了教程发代码跟大家分享,这个效果原本是Atom编辑器上的一个插件,现在只要在网页上引用JS脚本,我们的网站也能拥有如此有逼格的效果。教程如下:

先在你网站根目录建立一个文件,名称随便只要记得住就行,后缀名为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;
  }
  }());
 }
 ])
});
;




然后在模板的header.php、footer.php、网站后台 - 设置 - 首页底部信息 其中任意一个地方添加以下代码就可以了.

<script type="text/javascript" src="js/font.js"></script> 

<script>POWERMODE.colorful = true;POWERMODE.shake = false;document.body.addEventListener('input', POWERMODE);</script>

拿走要留言哦~~




发布时间:2017-8-16 12:09 Wednesday
  • 版权声明:除非注明,文章均为【皇朝博客网 - 集合网络各类精品资源 技术教程 各种珍藏福利的精品网站。】原创,欢迎转载!转载请注明本文地址,谢谢!

  • 作者:皇朝博客网 - 集合网络各类精品资源 技术教程 各种珍藏福利的精品网站。

    有没有那么一瞬间,想起好多人,回望身后,才发现错过好多人,错过好多事,错过好多好多。所以我现在努力珍惜留在我身边的人,我也曾试着去找回我失去的朋友,同学,等等,但都物是人非,以前我真的懒,聊天总是觉得无聊,觉得每天就那几句,吃了没,在干什么,等等,觉得毫无营养的话题。其实这只是借口,每天总有你能挤出来几分钟,哪怕随便聊聊,也不至于到现在,想找个人聊天,打电话都不知道找谁。其实,这也是维持友情,爱情,等关系的基础,现在想起来,晚了。总有那么几次你会有惊喜的事,悲伤的事,和他/她分享,总有那么一瞬间,你想找人

    返回列表
    上一篇:
    下一篇:

    发表评论

    快捷回复: