Emlog评论列表JS实现打字特效

emlog教程 2020-08-25

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

  以下代码保存为JS文件 命为什么名字都可以

  (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

  var particle = particles[i];

  if (particle.alpha

  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

  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, “?”);

  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 其中任意的文件添加以下代码就行

  

  

评论 (0)
    Top