L
O
A
D
I
N
G

页面特效


页面特效

动态线条

themes/matery/layout/layout.ejs文件中添加:

1
2
3
4
<!--动态线条背景-->
<script type="text/javascript"
color="122 103 238" opacity='0.7' zIndex="-2" count="200" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
</script>

参数说明:

  • color:线条颜色,三个数字分别为(R,G,B),默认:(0,0,0)
  • opacity:线条透明度(0~1),默认:0.5
  • count:线条的总数量,默认:150
  • zIndex:背景图层所在的位置,默认:-1

参考:博客搭建+美化(巨细版本) | 兴平 (crazyyuchi.github.io)

樱花特效

themes/matery/source/js下新建sakura.js,打开这个网址连接,将内容复制粘贴到sakura.js即可。

然后在themes/matery/layout/layout.ejs文件内添加下面的内容:

1
2
3
4
5
6
7
<script type="text/javascript">
//只在桌面版网页启用特效
var windowWidth = $(window).width();
if (windowWidth > 768) {
document.write('<script type="text/javascript" src="/js/sakura.js"><\/script>');
}
</script>

参考:博客搭建+美化(巨细版本) | 兴平 (crazyyuchi.github.io)

雪花特效

themes/matery/source/libs/others下新建文件snow.js,并插入如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
/*样式一*/
(function($){
$.fn.snow = function(options){
var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 10,
maxSize : 20,
newOn : 1000,
flakeColor : "#AFDAEF" /* 此处可以定义雪花颜色,若要白色可以改为#FFFFFF */
},
options = $.extend({}, defaults, options);
var interval= setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - 200,
endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake.clone().appendTo('body').css({
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: options.flakeColor
}).animate({
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},durationFall,'linear',function(){
$(this).remove()
});
}, options.newOn);
};
})(jQuery);
$(function(){
$.fn.snow({
minSize: 5, /* 定义雪花最小尺寸 */
maxSize: 50,/* 定义雪花最大尺寸 */
newOn: 300 /* 定义密集程度,数字越小越密集 */
});
});
/*样式二*/
/* 控制下雪 */
function snowFall(snow) {
/* 可配置属性 */
snow = snow || {};
this.maxFlake = snow.maxFlake || 200; /* 最多片数 */
this.flakeSize = snow.flakeSize || 10; /* 雪花形状 */
this.fallSpeed = snow.fallSpeed || 1; /* 坠落速度 */
}
/* 兼容写法 */
requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
function(callback) { setTimeout(callback, 1000 / 60); };

cancelAnimationFrame = window.cancelAnimationFrame ||
window.mozCancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.msCancelAnimationFrame ||
window.oCancelAnimationFrame;
/* 开始下雪 */
snowFall.prototype.start = function(){
/* 创建画布 */
snowCanvas.apply(this);
/* 创建雪花形状 */
createFlakes.apply(this);
/* 画雪 */
drawSnow.apply(this)
}
/* 创建画布 */
function snowCanvas() {
/* 添加Dom结点 */
var snowcanvas = document.createElement("canvas");
snowcanvas.id = "snowfall";
snowcanvas.width = window.innerWidth;
snowcanvas.height = document.body.clientHeight;
snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
document.getElementsByTagName("body")[0].appendChild(snowcanvas);
this.canvas = snowcanvas;
this.ctx = snowcanvas.getContext("2d");
/* 窗口大小改变的处理 */
window.onresize = function() {
snowcanvas.width = window.innerWidth;
/* snowcanvas.height = window.innerHeight */
}
}
/* 雪运动对象 */
function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
this.x = Math.floor(Math.random() * canvasWidth); /* x坐标 */
this.y = Math.floor(Math.random() * canvasHeight); /* y坐标 */
this.size = Math.random() * flakeSize + 2; /* 形状 */
this.maxSize = flakeSize; /* 最大形状 */
this.speed = Math.random() * 1 + fallSpeed; /* 坠落速度 */
this.fallSpeed = fallSpeed; /* 坠落速度 */
this.velY = this.speed; /* Y方向速度 */
this.velX = 0; /* X方向速度 */
this.stepSize = Math.random() / 30; /* 步长 */
this.step = 0 /* 步数 */
}
flakeMove.prototype.update = function() {
var x = this.x,
y = this.y;
/* 左右摆动(余弦) */
this.velX *= 0.98;
if (this.velY <= this.speed) {
this.velY = this.speed
}
this.velX += Math.cos(this.step += .05) * this.stepSize;

this.y += this.velY;
this.x += this.velX;
/* 飞出边界的处理 */
if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
this.reset(canvas.width, canvas.height)
}
};
/* 飞出边界-放置最顶端继续坠落 */
flakeMove.prototype.reset = function(width, height) {
this.x = Math.floor(Math.random() * width);
this.y = 0;
this.size = Math.random() * this.maxSize + 2;
this.speed = Math.random() * 1 + this.fallSpeed;
this.velY = this.speed;
this.velX = 0;
};
// 渲染雪花-随机形状(此处可修改雪花颜色!!!)
flakeMove.prototype.render = function(ctx) {
var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)"); /* 此处是雪花颜色,默认是白色 */
snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色,请自行查 */
snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)"); /* 找16进制的RGB 颜色代码。 */
ctx.save();
ctx.fillStyle = snowFlake;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
};
/* 创建雪花-定义形状 */
function createFlakes() {
var maxFlake = this.maxFlake,
flakes = this.flakes = [],
canvas = this.canvas;
for (var i = 0; i < maxFlake; i++) {
flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
}
}
/* 画雪 */
function drawSnow() {
var maxFlake = this.maxFlake,
flakes = this.flakes;
ctx = this.ctx, canvas = this.canvas, that = this;
/* 清空雪花 */
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var e = 0; e < maxFlake; e++) {
flakes[e].update();
flakes[e].render(ctx);
}
/* 一帧一帧的画 */
this.loop = requestAnimationFrame(function() {
drawSnow.apply(that);
});
}
/* 调用及控制方法 */
var snow = new snowFall({maxFlake:60});
snow.start();

themes/matery/layout/layout.ejs里添加:

1
2
3
4
<!-- 雪花特效 -->
<% if (theme.snow.enable) { %>
<script type="text/javascript" src="<%- theme.libs.js.snow %>"></script>
<% } %>

然后在主题配置文件里libs.js里添加一行

1
snow: /libs/others/snow.js

最后在主题配置文件最后添加:

1
2
3
# 雪花特效
snow:
enable: true

参考:超详细Hexo+Github博客搭建小白教程 | 韦阳的博客 (godweiyang.com)

鼠标特效

点击显示文字

themes\matery\source\js 下新建 click_show_text.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array
("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 5,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
3000,
function() {
$i.remove();
});
});
setTimeout('delay()', 2000);
});

function delay() {
$(".buryit").removeAttr("onclick");
}

themes\matery\layout\layout.ejsbody 标签里引入

1
2
<!--单击显示文字-->
<script type="text/javascript" src="/js/click_show_text.js"></script>

参考:Matery主题优化(一) | YF小林犟 (gitee.io)

礼花特效

在主题文件 themes\hexo-theme-matery\source\js 下新建 mouse_snow.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
(function() {
function t() {
i(),
a()
}
function i() {
document.addEventListener("mousemove", o),
document.addEventListener("touchmove", e),
document.addEventListener("touchstart", e),
window.addEventListener("resize", n)
}
function n(t) {
d = window.innerWidth,
window.innerHeight
}
function e(t) {
if (t.touches.length > 0)
for (var i = 0; i < t.touches.length; i++)
s(t.touches[i].clientX, t.touches[i].clientY, r[Math.floor(Math.random() * r.length)])
}
function o(t) {
u.x = t.clientX,
u.y = t.clientY,
s(u.x, u.y, r[Math.floor(Math.random() * r.length)])
}
function s(t, i, n) {
var e = new l;
e.init(t, i, n),
f.push(e)
}
function h() {
for (var t = 0; t < f.length; t++)
f[t].update();
for (t = f.length - 1; t >= 0; t--)
f[t].lifeSpan < 0 && (f[t].die(),
f.splice(t, 1))
}
function a() {
requestAnimationFrame(a),
h()
}
function l() {
this.character = "*",
this.lifeSpan = 120,
this.initialStyles = {
position: "fixed",
top: "0",
display: "block",
pointerEvents: "none",
"z-index": "10000000",
fontSize: "20px",
"will-change": "transform"
},
this.init = function(t, i, n) {
this.velocity = {
x: (Math.random() < .5 ? -1 : 1) * (Math.random() / 2),
y: 1
},
this.position = {
x: t - 10,
y: i - 20
},
this.initialStyles.color = n,
this.element = document.createElement("span"),
this.element.innerHTML = this.character,
c(this.element, this.initialStyles),
this.update(),
document.body.appendChild(this.element)
}
,
this.update = function() {
this.position.x += this.velocity.x,
this.position.y += this.velocity.y,
this.lifeSpan--,
this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + this.lifeSpan / 120 + ")"
}
,
this.die = function() {
this.element.parentNode.removeChild(this.element)
}
}
function c(t, i) {
for (var n in i)
t.style[n] = i[n]
}
var r = ["#D61C59", "#E7D84B", "#1B8798"]
, d = window.innerWidth
, u = (window.innerHeight,
{
x: d / 2,
y: d / 2
})
, f = [];
t()
}
)();

themes\matery\layout\layout.ejsbody 标签里面 引入

1
2
<!-- 鼠标移动特效 -->
<script type="text/javascript" src="/js/mouse_snow.js"></script>

参考:Matery主题优化(一) | YF小林犟 (gitee.io)

点击爆炸

themes/matery/source/js下新建fireworks.js,打开这个网址连接,将内容复制粘贴到fireworks.js即可。

然后再到themes/matery/layout/layout.ejs中添加:

1
2
3
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script type="text/javascript" src="/js/fireworks.js"></script>

然后hexo clean && hexo g && hexo s即可进行本地预览,就可以查看效果了。

参考:博客搭建+美化(巨细版本) | 兴平 (crazyyuchi.github.io)

浮出爱心

themes/matery/source/libs/others下新建文件click_love.js,并插入如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
!function(e,t,a){
function r(){
for(var e=0;e<n.length;e++)
n[e].alpha<=0?
(t.body.removeChild(n[e].el),n.splice(e,1)):
(n[e].y--,n[e].scale+=.004,n[e].alpha-=.013,
n[e].el.style.cssText="left:"+n[e].x+"px;top:"+n[e].y+"px;opacity:"+n[e].alpha+";transform:scale("+n[e].scale+","+n[e].scale+") rotate(45deg);background:"+n[e].color+";z-index:99999");
requestAnimationFrame(r)
}
var n=[];
e.requestAnimationFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},
function(e){
var a=t.createElement("style");
a.type="text/css";
try{
a.appendChild(t.createTextNode(e))
}catch(t){
a.styleSheet.cssText=e
}
t.getElementsByTagName("head")[0].appendChild(a)
}(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),
function(){
var a="function"==typeof e.onclick&&e.onclick;
e.onclick=function(e){
a&&a(),
function(e){
var a=t.createElement("div");
a.className="heart",
n.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}),
t.body.appendChild(a)
}(e)
}
}(),r()
}(window,document);

themes/matery/layout/layout.ejs里添加:

1
2
3
4
<!--  -->
<% if (theme.clicklove.enable) { %>
<script src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.clicklove) %>" async="async"></script>
<% } %>

然后在主题配置文件里libs.js里添加一行

1
snow: /libs/others/click_love.js

最后在主题配置文件最后添加:

1
2
3
# 点击页面浮出'爱心'效果
clicklove:
enable: true

推荐阅读

10个经典的网页鼠标特效代码_javascript技巧_脚本之家 (jb51.net)

动态标签栏

在文件 themes\matery\layout\layout.ejsbody 标签里添加

1
2
3
4
5
6
<!-- 动态标签栏 -->
<script type="text/javascript">
var OriginTitile = document.title, st;
document.addEventListener("visibilitychange", function () {
document.hidden ? (document.title = "爱我,别走!", clearTimeout(st)) : (document.title = "咦,你来啦!", st = setTimeout(function () { document.title = OriginTitile }, 3e3)) })
</script>

Matery主题优化(一) | YF小林犟 (gitee.io)

冒泡特效

themes>matery>source>libs>others下新建一个文件 bubble.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
// 首页轮播冒泡
function bubble () {
$('.carousel-item, .pd-header').circleMagic({
radius: 10,
density: .2,
color: 'rgba(255,255,255,.4)',
clearOffset: 0.99
});
} ! function (p) {
p.fn.circleMagic = function (t) {
var o, a, n, r, e = !0,
i = [],
d = p.extend({
color: "rgba(255,0,0,.5)",
radius: 10,
density: .3,
clearOffset: .2
}, t),
l = this[0];
function c () {
e = !(document.body.scrollTop > a)
}
function s () {
o = l.clientWidth, a = l.clientHeight, l.height = a + "px", n.width = o, n.height = a
}
function h () {
if (e)
for (var t in r.clearRect(0, 0, o, a), i) i[t].draw();
requestAnimationFrame(h)
}
function f () {
var t = this;
function e () {
t.pos.x = Math.random() * o, t.pos.y = a + 100 * Math.random(), t.alpha = .1 + Math.random() * d.clearOffset,
t.scale = .1 + .3 * Math.random(), t.speed = Math.random(), "random" === d.color ? t.color =
"rgba(" + Math.floor(255 * Math.random()) + ", " + Math.floor(0 * Math.random()) + ", " + Math.floor(
0 * Math.random()) + ", " + Math.random().toPrecision(2) + ")" : t.color = d.color
}
t.pos = {}, e(), this.draw = function () {
t.alpha <= 0 && e(), t.pos.y -= t.speed, t.alpha -= 5e-4, r.beginPath(), r.arc(t.pos.x, t.pos.y,
t.scale * d.radius, 0, 2 * Math.PI, !1), r.fillStyle = t.color, r.fill(), r.closePath()
}
} ! function () {
o = l.offsetWidth, a = l.offsetHeight,
function () {
var t = document.createElement("canvas");
t.id = "canvas";
t.style.top = 0;
t.style.left = 0
t.style.right = 0
t.style.zIndex = 0;
t.style.position = "absolute";

l.appendChild(t);
t.parentElement.style.overflow = "hidden"
}(), (n = document.getElementById("canvas")).width = o, n.height = a, r = n.getContext("2d");
for (var t = 0; t < o * d.density; t++) {
var e = new f;
i.push(e)
}
h()
}(), window.addEventListener("scroll", c, !1), window.addEventListener("resize", s, !1)
}
}(jQuery);
bubble()

在主题的配置文件 themes\hexo-theme-matery\_config.yml 找到 libs: 然后在 js 下引入

1
bubble: /libs/others/bubble.js

在主题的配置文件 themes\hexo-theme-matery\_config.yml 的底部,添加下面代码

1
2
3
# 首页轮播冒泡
bubble:
enable: true

在文件 themes\hexo-theme-matery\layout\layout.ejsbody 标签里面 引入

1
2
3
4
<!-- 白色冒泡 -->
<% if (theme.bubble.enable) { %>
<script type="text/javascript" src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.bubble) %>"></script>
<% } %>

参考:Matery主题优化(一) | YF小林犟 (gitee.io)

打字特效

首先在themes\matery\source\js下新建activate-power-mode.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
(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) {
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: 0';
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;
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) || '.';
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;
}
}());
}])
});

然后在themes\matery\layout\layout.ejs中添加

1
2
3
4
5
6
7
<!-- 添加打字爆炸特效 -->
<script src="/js/activate-power-mode.js"></script>
<script>
POWERMODE.colorful = true; // make power mode colorful
POWERMODE.shake = false; // turn off shake
document.body.addEventListener('input', POWERMODE);
</script>

文章作者: loyeh
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 loyeh !
评论
  目录