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

教程简介

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

教程一步

以下代码保存为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)
5. define([], factory);
6. else if(typeof exports === 'object')
7. exports["POWERMODE"] = factory();
8. else
9. root["POWERMODE"] = factory();
10. })(this, function() {
11. return (function(modules) { // webpackBootstrap
12. var installedModules = {};
13. function __webpack_require__(moduleId) {
14. if(installedModules[moduleId])
15. return installedModules[moduleId].exports;
16. var module = installedModules[moduleId] = {
17. exports: {},
18. id: moduleId,
19. loaded: false
20. };
21. modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
22. module.loaded = true;
23. return module.exports;
24. }
25. __webpack_require__.m = modules;
26. __webpack_require__.c = installedModules;
27. __webpack_require__.p = "";
28. return __webpack_require__(0);
29. })
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 = 'position:fixed;top:0;left:0;pointer-events:none;z-index:999999';
37. window.addEventListener('resize', function () {
38. canvas.width = window.innerWidth;
39. canvas.height = window.innerHeight;
40. });
41. document.body.appendChild(canvas);
42. var context = canvas.getContext('2d');
43. var particles = [];
44. var particlePointer = 0;
46. POWERMODE.shake = true;
48. function getRandom(min, max) {
49. return Math.random() * (max - min) + min;
50. }
51. function getColor(el) {
52. if (POWERMODE.colorful) {
53. var u = getRandom(0, 360);
54. return 'hsla(' + getRandom(u - 10, u + 10) + ', 100%, ' + getRandom(50, 80) + '%, ' + 1 + ')';
55. } else {
56. return window.getComputedStyle(el).color;
57. }
58. }
59. function getCaret() {
60. var el = document.activeElement;
61. var bcr;
62. if (el.tagName === 'TEXTAREA' ||
63. (el.tagName === 'INPUT' && el.getAttribute('type') === 'text')) {
64. var offset = __webpack_require__(1)(el, el.selectionStart);
65. bcr = el.getBoundingClientRect();
66. return {
67. x: offset.left + bcr.left,
68. y: offset.top + bcr.top,
69. color: getColor(el)
70. };
71. }
72. var selection = window.getSelection();
73. if (selection.rangeCount) {
74. var range = selection.getRangeAt(0);
75. var startNode = range.startContainer;
76. if (startNode.nodeType === document.TEXT_NODE) {
77. startNode = startNode.parentNode;
78. }
79. bcr = range.getBoundingClientRect();
80. return {
81. x: bcr.left,
82. y: bcr.top,
83. color: getColor(startNode)
84. };
85. }
86. return { x: 0, y: 0, color: 'transparent' };
87. }
88. function createParticle(x, y, color) {
89. return {
90. x: x,
91. y: y,
92. alpha: 1,
93. color: color,
94. velocity: {
95. x: -1 + Math.random() * 2,
96. y: -3.5 + Math.random() * 2
97. }
98. };
99. }
100. function POWERMODE() {
101. {
102. var caret = getCaret();
103. var numParticles = 5 + Math.round(Math.random() * 10);
104. while (numParticles--) {
105. particles[particlePointer] = createParticle(caret.x, caret.y, caret.color);
106. particlePointer = (particlePointer + 1) % 500;
107. }
108. }
109. {
110. if (POWERMODE.shake) {
111. var intensity = 1 + 2 * Math.random();
112. var x = intensity * (Math.random() > 0.5 ? -1 : 1);
113. var y = intensity * (Math.random() > 0.5 ? -1 : 1);
114. document.body.style.marginLeft = x + 'px';
115. document.body.style.marginTop = y + 'px';
116. setTimeout(function() {
117. document.body.style.marginLeft = '';
118. document.body.style.marginTop = '';
119. }, 75);
120. }
121. }
122. };
123. POWERMODE.colorful = false;
124. function loop() {
125. requestAnimationFrame(loop);
126. context.clearRect(0, 0, canvas.width, canvas.height);
127. for (var i = 0; i < particles.length; ++i) {
128. var particle = particles[i];
129. if (particle.alpha <= 0.1) continue;
130. particle.velocity.y += 0.075;
131. particle.x += particle.velocity.x;
132. particle.y += particle.velocity.y;
133. particle.alpha *= 0.96;
134. context.globalAlpha = particle.alpha;
135. context.fillStyle = particle.color;
136. context.fillRect(
137. Math.round(particle.x - 1.5),
138. Math.round(particle.y - 1.5),
139. 3, 3
140. );
141. }
142. }
143. requestAnimationFrame(loop);
145. module.exports = POWERMODE;
146. },
147. function(module, exports) {
148. (function () {
149. var properties = [
150. 'direction',
151. 'boxSizing',
152. 'width',
153. 'height',
154. 'overflowX',
155. 'overflowY',
156. 'borderTopWidth',
157. 'borderRightWidth',
158. 'borderBottomWidth',
159. 'borderLeftWidth',
160. 'borderStyle',
161. 'paddingTop',
162. 'paddingRight',
163. 'paddingBottom',
164. 'paddingLeft',
165. 'fontStyle',
166. 'fontVariant',
167. 'fontWeight',
168. 'fontStretch',
169. 'fontSize',
170. 'fontSizeAdjust',
171. 'lineHeight',
172. 'fontFamily',
173. 'textAlign',
174. 'textTransform',
175. 'textIndent',
176. 'textDecoration',
177. 'letterSpacing',
178. 'wordSpacing',
179. 'tabSize',
180. 'MozTabSize'
181. ];
182. var isFirefox = window.mozInnerScreenX != null;
183. function getCaretCoordinates(element, position, options) {
184. var debug = options && options.debug || false;
185. if (debug) {
186. var el = document.querySelector('#input-textarea-caret-position-mirror-div');
187. if ( el ) { el.parentNode.removeChild(el); }
188. }
189. var div = document.createElement('div');
190. div.id = 'input-textarea-caret-position-mirror-div';
191. document.body.appendChild(div);
192. var style = div.style;
193. var computed = window.getComputedStyle? getComputedStyle(element) : element.currentStyle; // currentStyle for IE < 9
194. style.whiteSpace = 'pre-wrap';
195. if (element.nodeName !== 'INPUT')
196. style.wordWrap = 'break-word';
197. style.position = 'absolute';
198. if (!debug)
199. style.visibility = 'hidden';
200. properties.forEach(function (prop) {
201. style[prop] = computed[prop];
202. });
203. if (isFirefox) {
204. if (element.scrollHeight > parseInt(computed.height))
205. style.overflowY = 'scroll';
206. } else {
207. style.overflow = 'hidden';
208. }
209. div.textContent = element.value.substring(0, position);
210. if (element.nodeName === 'INPUT')
211. div.textContent = div.textContent.replace(/\s/g, "\u00a0");
212. var span = document.createElement('span');
213. span.textContent = element.value.substring(position) || '.'; // || because a completely empty faux span doesn't render at all
214. div.appendChild(span);
215. var coordinates = {
216. top: span.offsetTop + parseInt(computed['borderTopWidth']),
217. left: span.offsetLeft + parseInt(computed['borderLeftWidth'])
218. };
219. if (debug) {
220. span.style.backgroundColor = '#aaa';
221. } else {
222. document.body.removeChild(div);
223. }
224. return coordinates;
225. }
226. if (typeof module != "undefined" && typeof module.exports != "undefined") {
227. module.exports = getCaretCoordinates;
228. } else {
229. window.getCaretCoordinates = getCaretCoordinates;
230. }
231. }());
232. }
233. ])
234. });
235. ;

教程二步

模板的header.php footer.php 其中任意的文件添加以下代码就行

1. <script type="text/javascript" src="这里填写你刚建立的JS的路径/你输入的名称.js"></script>
2. <script>POWERMODE.colorful = true;POWERMODE.shake = false;document.body.addEventListener('