为Hexo Next主题添加哈林摇特效(五)

这是一个很有趣的哈林摇特效!我在添加high一下中看到特效代码后,立马就花了些时间,将特效布局做到首页,并添加初始晃动效果。现在看来,效果还不错,“RSS”和”High”并排展示,低调又不失活跃。

效果



系列教程

添加步骤

主要涉及2方面:特效代码,样式调整

创建特效文件

主题目录中,创建layout\_macro\high.swig,添加如下代码:

  <a title="收藏到书签,偶尔High一下^_^" rel="alternate" class="mw-harlem_shake_slow wobble shake" href='javascript:(function() {
function c() {
var e = document.createElement("link");
e.setAttribute("type", "text/css");
e.setAttribute("rel", "stylesheet");
e.setAttribute("href", f);
e.setAttribute("class", l);
document.body.appendChild(e)
}

function h() {
var e = document.getElementsByClassName(l);
for (var t = 0; t < e.length; t++) {
document.body.removeChild(e[t])
}
}

function p() {
var e = document.createElement("div");
e.setAttribute("class", a);
document.body.appendChild(e);
setTimeout(function() {
document.body.removeChild(e)
}, 100)
}

function d(e) {
return {
height : e.offsetHeight,
width : e.offsetWidth
}
}

function v(i) {
var s = d(i);
return s.height > e && s.height < n && s.width > t && s.width < r
}

function m(e) {
var t = e;
var n = 0;
while (!!t) {
n += t.offsetTop;
t = t.offsetParent
}
return n
}

function g() {
var e = document.documentElement;
if (!!window.innerWidth) {
return window.innerHeight
} else if (e && !isNaN(e.clientHeight)) {
return e.clientHeight
}
return 0
}

function y() {
if (window.pageYOffset) {
return window.pageYOffset
}
return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
}

function E(e) {
var t = m(e);
return t >= w && t <= b + w
}

function S() {
var e = document.createElement("audio");
e.setAttribute("class", l);
e.src = i;
e.loop = false;
e.addEventListener("canplay", function() {
setTimeout(function() {
x(k)
}, 500);
setTimeout(function() {
N();
p();
for (var e = 0; e < O.length; e++) {
T(O[e])
}
}, 15500)
}, true);
e.addEventListener("ended", function() {
N();
h()
}, true);
e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
document.body.appendChild(e);
e.play()
}

function x(e) {
e.className += " " + s + " " + o
}

function T(e) {
e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
}

function N() {
var e = document.getElementsByClassName(s);
var t = new RegExp("\\b" + s + "\\b");
for (var n = 0; n < e.length; ) {
e[n].className = e[n].className.replace(t, "")
}
}

var e = 30;
var t = 30;
var n = 350;
var r = 350;
var i = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
var s = "mw-harlem_shake_me";
var o = "im_first";
var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
var a = "mw-strobe_light";
var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";
var l = "mw_added_css";
var b = g();
var w = y();
var C = document.getElementsByTagName("*");
var k = null;
for (var L = 0; L < C.length; L++) {
var A = C[L];
if (v(A)) {
if (E(A)) {
k = A;
break
}
}
}
if (A === null) {
console.warn("Could not find a node of the right size. Please try a different page.");
return
}
c();
S();
var O = [];
for (var L = 0; L < C.length; L++) {
var A = C[L];
if (v(A)) {
O.push(A)
}
}
})()'><i class="fa fa-music"></i> High</a>

引用特效代码

在侧边栏,引用特效代码。在主题目录,修改layout\_macro\sidebar.swig

{% include 'high.swig' %}

样式修改

(这里,我使用的是其它Pisces主题,其它主题请自行按照此法调试)
将”High”和”RSS”并排展示,在主题目录中,修改source\css\_schemes\Pisces\_sidebar.styl

display: inline-block;

最后

关于优化,建议将layout\_macro\high.swig中的harlem-shake.mp3harlem-shake.css放到cdn上,然后引用cdn地址,加快访问速度。

还有一个问题需要优化:设置正在执行特效时,不可以再点击,以免重放特效和音乐。首页High晃动的特效还不错,我也有考虑做成冒泡特效,弹出”点我摇摆一下zzzZZZ~~“之类的字样。最后没去折腾了,如果你做好了,或者做的更好,请在下方给我留言,一起学习o(^▽^)o。

热评文章