Hexo-matery banner添加气泡效果
1. 创建需要的JS
在自己博客根目录下找到themes/matery/source/libs/others
这个文件夹,在文件中创建 bubble.js
文件,填写如下内容:
// 上升的气泡
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()
2. _config.yml配置
上文创建好的js
文件需要在主题目录下的_config.yml
文件中libs:
下的js
处引用:
bubble: /libs/others/bubble.js
并且需要在_config.yml
文件中添加如下代码,来控制气泡特效的的打开和关闭。
# banner 气泡
bubble:
enable: true
3. 引用
找到博客根目录下themes/matery/layout/layout.ejs
这个文件,打开后在文件中body
标签中添加如下代码:
<!-- 冒泡 -->
<% if (theme.bubble.enable) { %>
<script type="text/javascript">
// 只在桌面版网页启用特效
var windowWidth = $(window).width();
document.write(
'<script type="text/javascript" src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.bubble) %>"><\/script>'
);
</script>
<% } %>
到此你已经开启了气泡特效,重新生成下博客文件便可以看到,如果后面你不想用气泡特效,你可以在主题目录下的_config.yml
文件中将# banner 气泡
处的enable
值改成false
即可。