Matery主题自定义美化(三)页面特效

创建 buble.js

​ 在 themes>hexo-theme-matery>source>libs>others 下创建一个新的文件 buble.js,将下面的代码 CV 到 buble.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 buble () {
$('.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);
buble()

_config.yml 配置

​ 接着将这个文件在主题的配置文件(_config.yml)中 lib:js: 下引入,大约在 458 行

1
buble: /libs/others/buble.js

​ 在主题的配置文件(_config.yml)中添加下面的代码

1
2
3
# banner 冒泡
buble:
enable: true

引用

​ 在 themes>hexo-theme-matery>layout>layout.ejs 这的 body 标签中添加下面的代码

1
2
3
4
5
6
7
8
9
10
<!-- 冒泡 -->
<% if (theme.buble.enable) { %>
<script type="text/javascript">
// 只在桌面版网页启用特效
var windowWidth = $(window).width();
document.write(
'<script type="text/javascript" src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.buble) %>"><\/script>'
);
</script>
<% } %>

添加鼠标点击烟花爆炸效果

首先在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>

添加樱花飘落效果

​ 在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>

添加雪花飘落效果

​ 跟樱花类似
  在themes/matery/source/js目录下新建snow.js文件,打开这个网址,将内容复制粘贴到cursor.js即可。

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

1
<script src="/js/snow.js"></script>

添加鼠标彩虹星星掉落跟随效果

​ 在themes/matery/source/js目录下新建cursor.js文件,打开这个网址,将内容复制粘贴到cursor.js即可。

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

1
<script src="/js/cursor.js"></script>

鼠标点击文字特效

​ 实现方法,引入js文件,在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
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": "#FF0000"
});
$("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.ejs文件内添加下面的内容:

1
2
<!-- 鼠标点击特效  富强民主文明 -->
<script src="/js/click_show_text.js"></script>

参考

Hexo-Fluid主题美化