Fork me on GitHub

播放音乐,博客随之shake

Music 效果的制作

之前看了梦瑶奇缘的博客,点了High一下,发现可以播放音乐,并且博客会随之摇摆,觉得很好玩,便想把这个效果弄到自己的博客上,刚好他写了教程,便根据他的教程搭建起来了。但是由于我的主题是Next主题,和他的不一样,所以还是有一些出入的。所以我准备写出如何在Next主题下加入该效果。

添加代码

Hexo/themes/next/layout/_partial/header.swig中的<ul>标签内部,增加代码。
代码增加的位置见下图:

具体代码如下:
<li class=”menu-item menu-item-“>
<a title=”Alan Walker - Fade - 纯音乐版” 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 = “

We recommend that you get a new browser.

“;
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 = “http://hdyang12.github.io/uploads/TheTruthThatYouLeave.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 = “http://hdyang12.github.io/uploads/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)
}
}
})() ‘>Music</a>
</li>

代码分析

看完了要增加的代码之后找到了2个url,如下所示:
var i = “//source.shengxuezixun.com/Fade.mp3”;
var f = “//source.shengxuezixun.com/harlem-shake-style.css”;

一个是Msic的url,还有一个就是博客shake的url,是一个css。
所以只要改变这2个url就可以改变歌曲和shake效果了。刚刚听了一下,发现这首歌(Fade)的节奏和css的
shake效果是匹配的。由于不会根据歌曲的节奏写css中各部件的shake时间,所以就先用这首歌了。有兴趣
的朋友可以自己研究css效果,贴出代码:
/ .im_drunk, .im_baked, .im_trippin, .im_blown /

.mw-strobe_light {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 100000;
background-color: rgba(250,250,250,0.8);
display: block;
}

.mw-harlem_shake_me {
transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;

animation: spin 1s infinite linear;
-moz-animation: spin 1s infinite linear;
-webkit-animation: spin 1s infinite linear;
-o-animation: spin 1s infinite linear;
-ms-animation: spin 1s infinite linear;
}

.mw-harlem_shake_slow {
transition: all 3.2s ease-in-out;
-moz-transition: all 3.2s ease-in-out;
-webkit-transition: all 3.2s ease-in-out;
-o-transition: all 3.2s ease-in-out;
-ms-transition: all 3.2s ease-in-out;

animation: spin 4s infinite linear;
-moz-animation: spin 4s infinite linear;
-webkit-animation: spin 4s infinite linear;
-o-animation: spin 4s infinite linear;
-ms-animation: spin 4s infinite linear;
}

/
Animate.css - http://daneden.me/animate
Licensed under the 閳斤拷 license (http://licence.visualidiot.com/)
But we have it modified for our use.
/
body {
-webkit-backface-visibility: hidden;
}

.mw-harlem_shake_me {
-webkit-animation-duration: .4s;
-moz-animation-duration: .4s;
-o-animation-duration: .4s;
animation-duration: .4s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

.mw-harlem_shake_slow {
-webkit-animation-duration: 1.6s;
-moz-animation-duration: 1.6s;
-o-animation-duration: 1.6s;
animation-duration: 1.6s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

.flash, .mw-strobe_light {
-webkit-animation-name: flash;
-moz-animation-name: flash;
-o-animation-name: flash;
animation-name: flash;
}

@-webkit-keyframes shake {
0%, 100% {-webkit-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}

@-moz-keyframes shake {
0%, 100% {-moz-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}

@-o-keyframes shake {
0%, 100% {-o-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}

@keyframes shake {
0%, 100% {transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
20%, 40%, 60%, 80% {transform: translateX(10px);}
}

.shake, .im_baked {
-webkit-animation-name: shake;
-moz-animation-name: shake;
-o-animation-name: shake;
animation-name: shake;
}

.swing, .im_drunk {
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
-moz-animation-name: swing;
-o-animation-name: swing;
animation-name: swing;
}

@-webkit-keyframes wobble {
0% { -webkit-transform: translateX(0%); }
15% { -webkit-transform: translateX(-15%) rotate(-4deg); }
30% { -webkit-transform: translateX(12%) rotate(3deg); }
45% { -webkit-transform: translateX(-9%) rotate(-2deg); }
60% { -webkit-transform: translateX(6%) rotate(2deg); }
75% { -webkit-transform: translateX(-3%) rotate(-1deg); }
100% { -webkit-transform: translateX(0%); }
}

@-moz-keyframes wobble {
0% { -moz-transform: translateX(0%); }
15% { -moz-transform: translateX(-15%) rotate(-5deg); }
30% { -moz-transform: translateX(12%) rotate(3deg); }
45% { -moz-transform: translateX(-9%) rotate(-3deg); }
60% { -moz-transform: translateX(6%) rotate(2deg); }
75% { -moz-transform: translateX(-3%) rotate(-1deg); }
100% { -moz-transform: translateX(0%); }
}

@-o-keyframes wobble {
0% { -o-transform: translateX(0%); }
15% { -o-transform: translateX(-15%) rotate(-5deg); }
30% { -o-transform: translateX(12%) rotate(3deg); }
45% { -o-transform: translateX(-9%) rotate(-3deg); }
60% { -o-transform: translateX(6%) rotate(2deg); }
75% { -o-transform: translateX(-3%) rotate(-1deg); }
100% { -o-transform: translateX(0%); }
}

@keyframes wobble {
0% { transform: translateX(0%); }`
15% { transform: translateX(-15%) rotate(-5deg); }
30% { transform: translateX(12%) rotate(3deg); }
45% { transform: translateX(-9%) rotate(-3deg); }
60% { transform: translateX(6%) rotate(2deg); }
75% { transform: translateX(-3%) rotate(-1deg); }
100% { transform: translateX(0%); }
}

.wobble, .im_first {
-webkit-animation-name: wobble;
-moz-animation-name: wobble;
-o-animation-name: wobble;
animation-name: wobble;
}

@-webkit-keyframes pulse {
0% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.1); }
100% { -webkit-transform: scale(1); }
}
@-moz-keyframes pulse {
0% { -moz-transform: scale(1); }
50% { -moz-transform: scale(1.1); }
100% { -moz-transform: scale(1); }
}
@-o-keyframes pulse {
0% { -o-transform: scale(1); }
50% { -o-transform: scale(1.1); }
100% { -o-transform: scale(1); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}

.pulse, .im_blown {
-webkit-animation-name: pulse;
-moz-animation-name: pulse;
-o-animation-name: pulse;
animation-name: pulse;
}

@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}

50% {
opacity: 1;
-webkit-transform: scale(1.05);
}

70% {
-webkit-transform: scale(.9);
}

100% {
-webkit-transform: scale(1);
}
}

@-moz-keyframes bounceIn {
0% {
opacity: 0;
-moz-transform: scale(.3);
}

50% {
opacity: 1;
-moz-transform: scale(1.05);
}

70% {
-moz-transform: scale(.9);
}

100% {
-moz-transform: scale(1);
}
}

@-o-keyframes bounceIn {
0% {
opacity: 0;
-o-transform: scale(.3);
}

50% {
opacity: 1;
-o-transform: scale(1.05);
}

70% {
-o-transform: scale(.9);
}

100% {
-o-transform: scale(1);
}
}

@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}

50% {
opacity: 1;
transform: scale(1.05);
}

70% {
transform: scale(.9);
}

100% {
transform: scale(1);
}
}

.bounceIn, .im_trippin {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
animation-name: bounceIn;
}

「真诚赞赏,手留余香」