[js] 网页输入框打字特效（懒人版）

1
(function webpackUniversalModuleDefinition(root, factory) {
2
  if (typeof exports === "object" && typeof module === "object")
3
    module.exports = factory();
4
  else if (typeof define === "function" && define.amd) define([], factory);
5
  else if (typeof exports === "object") exports["POWERMODE"] = factory();
6
  else root["POWERMODE"] = factory();
7
})(this, function () {
8
  return (function (modules) {
9
    var installedModules = {};
10
    function __webpack_require__(moduleId) {
11
      if (installedModules[moduleId]) return installedModules[moduleId].exports;
12
      var module = (installedModules[moduleId] = {
13
        exports: {},
14
        id: moduleId,
15
        loaded: false,
16
      });
17
      modules[moduleId].call(
18
        module.exports,
19
        module,
20
        module.exports,
21
        __webpack_require__,
22
      );
23
      module.loaded = true;
24
      return module.exports;
25
    }
26
    __webpack_require__.m = modules;
27
    __webpack_require__.c = installedModules;
28
    __webpack_require__.p = "";
29
    return __webpack_require__(0);
30
  })([
31
    function (module, exports, __webpack_require__) {
32
      "use strict";
33
      var canvas = document.createElement("canvas");
34
      canvas.width = window.innerWidth;
35
      canvas.height = window.innerHeight;
36
      canvas.style.cssText =
37
        "position:fixed;top:0;left:0;pointer-events:none;z-index:999999";
38
      window.addEventListener("resize", function () {
39
        canvas.width = window.innerWidth;
40
        canvas.height = window.innerHeight;
41
      });
42
      document.body.appendChild(canvas);
43
      var context = canvas.getContext("2d");
44
      var particles = [];
45
      var particlePointer = 0;
46
      var frames = 120;
47
      var framesRemain = frames;
48
      var rendering = false;
49
      POWERMODE.shake = true;
50

51
      function getRandom(min, max) {
52
        return Math.random() * (max - min) + min;
53
      }
54
      function getColor(el) {
55
        if (POWERMODE.colorful) {
56
          var u = getRandom(0, 360);
57
          return (
58
            "hsla(" +
59
            getRandom(u - 10, u + 10) +
60
            ", 100%, " +
61
            getRandom(50, 80) +
62
            "%, " +
63
            1 +
64
            ")"
65
          );
66
        } else {
67
          return window.getComputedStyle(el).color;
68
        }
69
      }
70
      function getCaret() {
71
        var el = document.activeElement;
72
        var bcr;
73
        if (
74
          el.tagName === "TEXTAREA" ||
75
          (el.tagName === "INPUT" && el.getAttribute("type") === "text")
76
        ) {
77
          var offset = __webpack_require__(1)(el, el.selectionStart);
78
          bcr = el.getBoundingClientRect();
79
          return {
80
            x: offset.left + bcr.left,
81
            y: offset.top + bcr.top,
82
            color: getColor(el),
83
          };
84
        }
85
        var selection = window.getSelection();
86
        if (selection.rangeCount) {
87
          var range = selection.getRangeAt(0);
88
          var startNode = range.startContainer;
89
          if (startNode.nodeType === document.TEXT_NODE) {
90
            startNode = startNode.parentNode;
91
          }
92
          bcr = range.getBoundingClientRect();
93
          return {
94
            x: bcr.left,
95
            y: bcr.top,
96
            color: getColor(startNode),
97
          };
98
        }
99
        return {
100
          x: 0,
101
          y: 0,
102
          color: "transparent",
103
        };
104
      }
105
      function createParticle(x, y, color) {
106
        return {
107
          x: x,
108
          y: y,
109
          alpha: 1,
110
          color: color,
111
          velocity: {
112
            x: -1 + Math.random() * 2,
113
            y: -3.5 + Math.random() * 2,
114
          },
115
        };
116
      }
117
      function POWERMODE() {
118
        {
119
          var caret = getCaret();
120
          var numParticles = 5 + Math.round(Math.random() * 10);
121
          while (numParticles--) {
122
            particles[particlePointer] = createParticle(
123
              caret.x,
124
              caret.y,
125
              caret.color,
126
            );
127
            particlePointer = (particlePointer + 1) % 500;
128
          }
129
          framesRemain = frames;
130
          if (!rendering) {
131
            requestAnimationFrame(loop);
132
          }
133
        }
134
        {
135
          if (POWERMODE.shake) {
136
            var intensity = 1 + 2 * Math.random();
137
            var x = intensity * (Math.random() > 0.5 ? -1 : 1);
138
            var y = intensity * (Math.random() > 0.5 ? -1 : 1);
139
            document.body.style.marginLeft = x + "px";
140
            document.body.style.marginTop = y + "px";
141
            setTimeout(function () {
142
              document.body.style.marginLeft = "";
143
              document.body.style.marginTop = "";
144
            }, 75);
145
          }
146
        }
147
      }
148
      POWERMODE.colorful = false;
149

150
      function loop() {
151
        if (framesRemain > 0) {
152
          requestAnimationFrame(loop);
153
          framesRemain--;
154
          rendering = true;
155
        } else {
156
          rendering = false;
157
        }
158
        context.clearRect(0, 0, canvas.width, canvas.height);
159
        for (var i = 0; i < particles.length; ++i) {
160
          var particle = particles[i];
161
          if (particle.alpha <= 0.1) continue;
162
          particle.velocity.y += 0.075;
163
          particle.x += particle.velocity.x;
164
          particle.y += particle.velocity.y;
165
          particle.alpha *= 0.96;
166
          context.globalAlpha = particle.alpha;
167
          context.fillStyle = particle.color;
168
          context.fillRect(
169
            Math.round(particle.x - 1.5),
170
            Math.round(particle.y - 1.5),
171
            3,
172
            3,
173
          );
174
        }
175
      }
176
      requestAnimationFrame(loop);
177
      module.exports = POWERMODE;
178
    },
179
    function (module, exports) {
180
      (function () {
181
        var properties = [
182
          "direction",
183
          "boxSizing",
184
          "width",
185
          "height",
186
          "overflowX",
187
          "overflowY",
188
          "borderTopWidth",
189
          "borderRightWidth",
190
          "borderBottomWidth",
191
          "borderLeftWidth",
192
          "borderStyle",
193
          "paddingTop",
194
          "paddingRight",
195
          "paddingBottom",
196
          "paddingLeft",
197
          "fontStyle",
198
          "fontVariant",
199
          "fontWeight",
200
          "fontStretch",
201
          "fontSize",
202
          "fontSizeAdjust",
203
          "lineHeight",
204
          "fontFamily",
205
          "textAlign",
206
          "textTransform",
207
          "textIndent",
208
          "textDecoration",
209
          "letterSpacing",
210
          "wordSpacing",
211
          "tabSize",
212
          "MozTabSize",
213
        ];
214
        var isFirefox = window.mozInnerScreenX != null;
215

216
        function getCaretCoordinates(element, position, options) {
217
          var debug = (options && options.debug) || false;
218
          if (debug) {
219
            var el = document.querySelector(
220
              "#input-textarea-caret-position-mirror-div",
221
            );
222
            if (el) {
223
              el.parentNode.removeChild(el);
224
            }
225
          }
226
          var div = document.createElement("div");
227
          div.id = "input-textarea-caret-position-mirror-div";
228
          document.body.appendChild(div);
229
          var style = div.style;
230
          var computed = window.getComputedStyle
231
            ? getComputedStyle(element)
232
            : element.currentStyle;
233
          style.whiteSpace = "pre-wrap";
234
          if (element.nodeName !== "INPUT") style.wordWrap = "break-word";
235
          style.position = "absolute";
236
          if (!debug) style.visibility = "hidden";
237
          properties.forEach(function (prop) {
238
            style[prop] = computed[prop];
239
          });
240
          if (isFirefox) {
241
            if (element.scrollHeight > parseInt(computed.height))
242
              style.overflowY = "scroll";
243
          } else {
244
            style.overflow = "hidden";
245
          }
246
          div.textContent = element.value.substring(0, position);
247
          if (element.nodeName === "INPUT")
248
            div.textContent = div.textContent.replace(/\s/g, "\u00a0");
249
          var span = document.createElement("span");
250
          span.textContent = element.value.substring(position) || ".";
251
          div.appendChild(span);
252
          var coordinates = {
253
            top: span.offsetTop + parseInt(computed["borderTopWidth"]),
254
            left: span.offsetLeft + parseInt(computed["borderLeftWidth"]),
255
          };
256
          if (debug) {
257
            span.style.backgroundColor = "#aaa";
258
          } else {
259
            document.body.removeChild(div);
260
          }
261
          return coordinates;
262
        }
263
        if (
264
          typeof module != "undefined" &&
265
          typeof module.exports != "undefined"
266
        ) {
267
          module.exports = getCaretCoordinates;
268
        } else {
269
          window.getCaretCoordinates = getCaretCoordinates;
270
        }
271
      })();
272
    },
273
  ]);
274
});
275
POWERMODE.colorful = true; // make power mode colorful
276
POWERMODE.shake = false; // turn off shake
277
document.body.addEventListener("input", POWERMODE);