教程简介
在别人博客看到评论打字特效 觉得好看 网上找了教程发代码跟大家分享 这个效果原本是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 < 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的路径/你输入的名称.js"></script>
- <script>POWERMODE.colorful = true;POWERMODE.shake = false;document.body.addEventListener('