mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2026-04-16 20:30:53 +08:00
V2.0.0
Breaking change 1. 手機端界面卡片化，同時，手機端也可以顯示側邊欄的內容 2. 修復當menu過多時，header界面出現錯亂的bug。當menu過多時，會變為sidebar模式 3. 增加medium-zoom大圖查看模式 4. 增加鼠標點擊特效：文字和愛心 兩個點擊特效 5. 主頁subtitle可以調用第三方api(金山詞霸每日一句、一言網的一句話、一句網、今日詩詞) 6. 添加 snackbar 彈窗 7. 修改nightshift為darkmode，darkmode可隨系統設置而自動切換，可設置隨時間而切換darkmode 8. 修復hexo自帶的標籤外掛(Tag Plugins)顯示bug(Block Quote、Code Block With caption、Gist、Youtube、Vimeo) 9. 主題所需要的css和js可根據需要配置CDN 10. 更改darkmode的加載方式，網站設置dark mode後，現在進入網頁不會在'閃'一下 11. 背景特效和背景圖片在手機界面也會顯示 12. 增加justified-gallery圖片顯示(Tag Plugins) Feature 1. 文章頁面，字數統計、閲讀時長和閲讀量前面添加icon 2. 更改懶加載js 3. 升級typed.js/instantpage.js到最新版 4. 搜索和右下角按鈕添加退出特效 Fixed 1. 修復在 Hexo 4.0.0下，一些按鈕點擊會跳出一個空白頁的bug 2. 修復在 Hexo 4.0.0下，分頁按鈕出現代碼的bug 3. 修復當沒有設置評論時，右下角依舊出現'直達評論'按鈕的bug 4. 優化sidebar的打開速度 5. 修復文章頁標題左右邊距不平等的bug 6. 修復keywords讀取的bug 7. 修復當post/page 內容為空時，footer位置錯亂的bug 8. 修復在手機safari，toc sidebar底部內容被遮擋的bug 9. 完善Dark mode,一些界面的配色 10. 修復 card-archives 查看更多 跳轉bug Remove 1. 移除Gitment 2. 移除Gallery
This commit is contained in:
Jerry
42
source/js/third-party/ClickShowText.js
vendored
Normal file
42
source/js/third-party/ClickShowText.js
vendored
Normal file
@@ -0,0 +1,42 @@
|
||||
function co(){
|
||||
var colorElements = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
|
||||
var colorArray = colorElements.split(",");
|
||||
var color ="#";
|
||||
for(var i =0;i<6;i++){
|
||||
color+=colorArray[Math.floor(Math.random()*16)];
|
||||
}
|
||||
return color;
|
||||
};
|
||||
var a_idx = 0;
|
||||
jQuery(document).ready(function($) {
|
||||
$("body").click(function (e) {
|
||||
|
||||
var config = GLOBAL_CONFIG.ClickShowText;
|
||||
|
||||
/*这个数组中的每一个字符是你要浮动显示的词或句子，每次点击鼠标后按顺序出现*/
|
||||
var a = config.text.split(",");
|
||||
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": 150,
|
||||
"top": y - 20,
|
||||
"left": x -40,
|
||||
"position": "absolute",
|
||||
"font-weight": "bold",
|
||||
"color": co(),
|
||||
"cursor": "default",
|
||||
"font-size": config.fontSize || "inherit"
|
||||
});
|
||||
$("body").append($i);
|
||||
$i.animate({
|
||||
"top": y - 180,
|
||||
"opacity": 0
|
||||
},
|
||||
1500,
|
||||
function() {
|
||||
$i.remove();
|
||||
});
|
||||
});
|
||||
});
|
||||
1
source/js/third-party/activate-power-mode.js
vendored
Normal file
1
source/js/third-party/activate-power-mode.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.POWERMODE=e():t.POWERMODE=e()}(this,function(){return function(o){var n={};function r(t){if(n[t])return n[t].exports;var e=n[t]={exports:{},id:t,loaded:!1};return o[t].call(e.exports,e,e.exports,r),e.loaded=!0,e.exports}return r.m=o,r.c=n,r.p="",r(0)}([function(t,e,l){"use strict";var r=document.createElement("canvas");r.width=window.innerWidth,r.height=window.innerHeight,r.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999",window.addEventListener("resize",function(){r.width=window.innerWidth,r.height=window.innerHeight}),document.body.appendChild(r);var i=r.getContext("2d"),c=[],u=0,p=!1;function o(t,e){return Math.random()*(e-t)+t}function f(t){if(h.colorful){var e=o(0,360);return"hsla("+o(e-10,e+10)+", 100%, "+o(50,80)+"%, 1)"}return window.getComputedStyle(t).color}function h(){for(var t=function(){var t,e=document.activeElement;if("TEXTAREA"===e.tagName||"INPUT"===e.tagName&&"text"===e.getAttribute("type")){var o=l(1)(e,e.selectionEnd);return t=e.getBoundingClientRect(),{x:o.left+t.left,y:o.top+t.top,color:f(e)}}var n=window.getSelection();if(n.rangeCount){var r=n.getRangeAt(0),i=r.startContainer;return i.nodeType===document.TEXT_NODE&&(i=i.parentNode),{x:(t=r.getBoundingClientRect()).left,y:t.top,color:f(i)}}return{x:0,y:0,color:"transparent"}}(),e=5+Math.round(10*Math.random());e--;)c[u]=(o=t.x,n=t.y,r=t.color,{x:o,y:n,alpha:1,color:r,velocity:{x:2*Math.random()-1,y:2*Math.random()-3.5}}),u=(u+1)%500;var o,n,r;if(h.shake){var i=1+2*Math.random(),a=i*(.5<Math.random()?-1:1),d=i*(.5<Math.random()?-1:1);document.body.style.marginLeft=a+"px",document.body.style.marginTop=d+"px",setTimeout(function(){document.body.style.marginLeft="",document.body.style.marginTop=""},75)}p||requestAnimationFrame(s)}function s(){p=!0,i.clearRect(0,0,r.width,r.height);for(var t=!1,e=r.getBoundingClientRect(),o=0;o<c.length;++o){var n=c[o];n.alpha<=.1||(n.velocity.y+=.075,n.x+=n.velocity.x,n.y+=n.velocity.y,n.alpha*=.96,i.globalAlpha=n.alpha,i.fillStyle=n.color,i.fillRect(Math.round(n.x-1.5)-e.left,Math.round(n.y-1.5)-e.top,3,3),t=!0)}t?requestAnimationFrame(s):p=!1}h.shake=!0,h.colorful=!1,t.exports=h},function(e,t){!function(){var u=["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"],p=null!=window.mozInnerScreenX;function t(t,e,o){var n=o&&o.debug||!1;if(n){var r=document.querySelector("#input-textarea-caret-position-mirror-div");r&&r.parentNode.removeChild(r)}var i=document.createElement("div");i.id="input-textarea-caret-position-mirror-div",document.body.appendChild(i);var a=i.style,d=window.getComputedStyle?getComputedStyle(t):t.currentStyle;a.whiteSpace="pre-wrap","INPUT"!==t.nodeName&&(a.wordWrap="break-word"),a.position="absolute",n||(a.visibility="hidden"),u.forEach(function(t){a[t]=d[t]}),p?t.scrollHeight>parseInt(d.height)&&(a.overflowY="scroll"):a.overflow="hidden",i.textContent=t.value.substring(0,e),"INPUT"===t.nodeName&&(i.textContent=i.textContent.replace(/\s/g," "));var l=document.createElement("span");l.textContent=t.value.substring(e)||".",i.appendChild(l);var c={top:l.offsetTop+parseInt(d.borderTopWidth),left:l.offsetLeft+parseInt(d.borderLeftWidth)};return n?l.style.backgroundColor="#aaa":document.body.removeChild(i),c}void 0!==e&&void 0!==e.exports?e.exports=t:window.getCaretCoordinates=t}()}])});
|
||||
97
source/js/third-party/canvas-nest.js
vendored
97
source/js/third-party/canvas-nest.js
vendored
@@ -1,11 +1,88 @@
|
||||
!function(){
|
||||
var userAgentInfo = navigator.userAgent;
|
||||
var Agents = ["iPad", "iPhone", "Android",
|
||||
"SymbianOS", "Windows Phone",
|
||||
"iPod", "webOS", "BlackBerry", "IEMobile"];
|
||||
for (var v = 0; v < Agents.length; v++) {
|
||||
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
||||
return;
|
||||
}
|
||||
! function () {
|
||||
var cn = document.getElementById('canvas_nest');
|
||||
var mb = cn.getAttribute("mobile");
|
||||
|
||||
if (mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
|
||||
return;
|
||||
}
|
||||
|
||||
function o(w, v, i) {
|
||||
return w.getAttribute(v) || i
|
||||
}
|
||||
|
||||
function j(i) {
|
||||
return document.getElementsByTagName(i)
|
||||
}
|
||||
|
||||
function l() {
|
||||
var i = j("script"),
|
||||
w = i.length,
|
||||
v = i[w - 1];
|
||||
return {
|
||||
l: w,
|
||||
z: o(v, "zIndex", -1),
|
||||
o: o(v, "opacity", 0.5),
|
||||
c: o(v, "color", "0,0,0"),
|
||||
n: o(v, "count", 99)
|
||||
}
|
||||
function o(w,v,i){return w.getAttribute(v)||i}function j(i){return document.getElementsByTagName(i)}function l(){var i=j("script"),w=i.length,v=i[w-1];return{l:w,z:o(v,"zIndex",-1),o:o(v,"opacity",0.5),c:o(v,"color","0,0,0"),n:o(v,"count",99)}}function k(){r=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,n=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function b(){e.clearRect(0,0,r,n);var w=[f].concat(t);var x,v,A,B,z,y;t.forEach(function(i){i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>r||i.x<0?-1:1,i.ya*=i.y>n||i.y<0?-1:1,e.fillRect(i.x-0.5,i.y-0.5,1,1);for(v=0;v<w.length;v++){x=w[v];if(i!==x&&null!==x.x&&null!==x.y){B=i.x-x.x,z=i.y-x.y,y=B*B+z*z;y<x.max&&(x===f&&y>=x.max/2&&(i.x-=0.03*B,i.y-=0.03*z),A=(x.max-y)/x.max,e.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke())}}w.splice(w.indexOf(i),1)}),m(b)}var u=document.createElement("canvas"),s=l(),c="c_n"+s.l,e=u.getContext("2d"),r,n,m=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(i){window.setTimeout(i,1000/45)},a=Math.random,f={x:null,y:null,max:20000};u.id=c;u.style.cssText="position:fixed;top:0;left:0;z-index:"+s.z+";opacity:"+s.o;j("body")[0].appendChild(u);k(),window.onresize=k;window.onmousemove=function(i){i=i||window.event,f.x=i.clientX,f.y=i.clientY},window.onmouseout=function(){f.x=null,f.y=null};for(var t=[],p=0;s.n>p;p++){var h=a()*r,g=a()*n,q=2*a()-1,d=2*a()-1;t.push({x:h,y:g,xa:q,ya:d,max:6000})}setTimeout(function(){b()},100)}();
|
||||
}
|
||||
|
||||
function k() {
|
||||
r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
|
||||
}
|
||||
|
||||
function b() {
|
||||
e.clearRect(0, 0, r, n);
|
||||
var w = [f].concat(t);
|
||||
var x, v, A, B, z, y;
|
||||
t.forEach(function (i) {
|
||||
i.x += i.xa, i.y += i.ya, i.xa *= i.x > r || i.x < 0 ? -1 : 1, i.ya *= i.y > n || i.y < 0 ? -1 : 1, e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);
|
||||
for (v = 0; v < w.length; v++) {
|
||||
x = w[v];
|
||||
if (i !== x && null !== x.x && null !== x.y) {
|
||||
B = i.x - x.x, z = i.y - x.y, y = B * B + z * z;
|
||||
y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke())
|
||||
}
|
||||
}
|
||||
w.splice(w.indexOf(i), 1)
|
||||
}), m(b)
|
||||
}
|
||||
var u = document.createElement("canvas"),
|
||||
s = l(),
|
||||
c = "c_n" + s.l,
|
||||
e = u.getContext("2d"),
|
||||
r, n, m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (i) {
|
||||
window.setTimeout(i, 1000 / 45)
|
||||
},
|
||||
a = Math.random,
|
||||
f = {
|
||||
x: null,
|
||||
y: null,
|
||||
max: 20000
|
||||
};
|
||||
u.id = c;
|
||||
u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;
|
||||
j("body")[0].appendChild(u);
|
||||
k(), window.onresize = k;
|
||||
window.onmousemove = function (i) {
|
||||
i = i || window.event, f.x = i.clientX, f.y = i.clientY
|
||||
}, window.onmouseout = function () {
|
||||
f.x = null, f.y = null
|
||||
};
|
||||
for (var t = [], p = 0; s.n > p; p++) {
|
||||
var h = a() * r,
|
||||
g = a() * n,
|
||||
q = 2 * a() - 1,
|
||||
d = 2 * a() - 1;
|
||||
t.push({
|
||||
x: h,
|
||||
y: g,
|
||||
xa: q,
|
||||
ya: d,
|
||||
max: 6000
|
||||
})
|
||||
}
|
||||
setTimeout(function () {
|
||||
b()
|
||||
}, 100)
|
||||
}();
|
||||
26
source/js/third-party/canvas-ribbon.js
vendored
26
source/js/third-party/canvas-ribbon.js
vendored
@@ -4,8 +4,23 @@
|
||||
* Version: v1.0.1
|
||||
* GitHub: https://github.com/hustcc/ribbon.js
|
||||
**/
|
||||
// changed by Molunerfinn
|
||||
|
||||
!(function () {
|
||||
|
||||
var script = document.getElementById('ribbon');
|
||||
var mb = script.getAttribute("mobile");
|
||||
if (mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
|
||||
return;
|
||||
}
|
||||
|
||||
config = {
|
||||
z: attr(script, 'zIndex', -1), // z-index
|
||||
a: attr(script, 'alpha', 0.6), // alpha
|
||||
s: attr(script, 'size', 90), // size
|
||||
c: attr(script, 'data-click', true) // click-to-change
|
||||
}
|
||||
|
||||
|
||||
function attr (node, attr, default_value) {
|
||||
if (default_value === true) {
|
||||
return node.getAttribute(attr) || default_value
|
||||
@@ -13,15 +28,6 @@
|
||||
return Number(node.getAttribute(attr)) || default_value
|
||||
}
|
||||
|
||||
// get user config
|
||||
var script = document.getElementById('ribbon'),
|
||||
config = {
|
||||
z: attr(script, 'zIndex', -1), // z-index
|
||||
a: attr(script, 'alpha', 0.6), // alpha
|
||||
s: attr(script, 'size', 90), // size
|
||||
c: attr(script, 'data-click', true) // click-to-change
|
||||
}
|
||||
|
||||
var canvas = document.createElement('canvas'),
|
||||
g2d = canvas.getContext('2d'),
|
||||
pr = window.devicePixelRatio || 1,
|
||||
|
||||
1
source/js/third-party/click_heart.js
vendored
Normal file
1
source/js/third-party/click_heart.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
!function(e,t,a){function r(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)}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 t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),r(e)}}(),function e(){for(var a=0;a<n.length;a++)n[a].alpha<=0?(t.body.removeChild(n[a].el),n.splice(a,1)):(n[a].y--,n[a].scale+=.004,n[a].alpha-=.013,n[a].el.style.cssText="left:"+n[a].x+"px;top:"+n[a].y+"px;opacity:"+n[a].alpha+";transform:scale("+n[a].scale+","+n[a].scale+") rotate(45deg);background:"+n[a].color+";z-index:99999");requestAnimationFrame(e)}()}(window,document);
|
||||
518
source/js/third-party/piao.js
vendored
518
source/js/third-party/piao.js
vendored
@@ -1,12 +1,13 @@
|
||||
(function(name, factory) {
|
||||
if (typeof window === "object") {
|
||||
window[name] = factory()
|
||||
}
|
||||
})("Ribbons", function() {
|
||||
var _w = window,
|
||||
_b = document.body,
|
||||
_d = document.documentElement;
|
||||
var random = function() {
|
||||
|
||||
(function (name, factory) {
|
||||
if (typeof window === "object") {
|
||||
window[name] = factory()
|
||||
}
|
||||
})("Ribbons", function () {
|
||||
var _w = window,
|
||||
_b = document.body,
|
||||
_d = document.documentElement;
|
||||
var random = function () {
|
||||
if (arguments.length === 1) {
|
||||
if (Array.isArray(arguments[0])) {
|
||||
var index = Math.round(random(0, arguments[0].length - 1));
|
||||
@@ -18,7 +19,7 @@
|
||||
}
|
||||
return 0
|
||||
};
|
||||
var screenInfo = function(e) {
|
||||
var screenInfo = function (e) {
|
||||
var width = Math.max(0, _w.innerWidth || _d.clientWidth || _b.clientWidth || 0),
|
||||
height = Math.max(0, _w.innerHeight || _d.clientHeight || _b.clientHeight || 0),
|
||||
scrollx = Math.max(0, _w.pageXOffset || _d.scrollLeft || _b.scrollLeft || 0) - (_d.clientLeft || 0),
|
||||
@@ -33,7 +34,7 @@
|
||||
scrolly: scrolly
|
||||
}
|
||||
};
|
||||
var mouseInfo = function(e) {
|
||||
var mouseInfo = function (e) {
|
||||
var screen = screenInfo(e),
|
||||
mousex = e ? Math.max(0, e.pageX || e.clientX || 0) : 0,
|
||||
mousey = e ? Math.max(0, e.pageY || e.clientY || 0) : 0;
|
||||
@@ -44,60 +45,60 @@
|
||||
centery: mousey - screen.height / 2
|
||||
}
|
||||
};
|
||||
var Point = function(x, y) {
|
||||
var Point = function (x, y) {
|
||||
this.x = 0;
|
||||
this.y = 0;
|
||||
this.set(x, y)
|
||||
};
|
||||
Point.prototype = {
|
||||
constructor: Point,
|
||||
set: function(x, y) {
|
||||
this.x = x || 0;
|
||||
this.y = y || 0
|
||||
},
|
||||
copy: function(point) {
|
||||
this.x = point.x || 0;
|
||||
this.y = point.y || 0;
|
||||
return this
|
||||
},
|
||||
multiply: function(x, y) {
|
||||
this.x *= x || 1;
|
||||
this.y *= y || 1;
|
||||
return this
|
||||
},
|
||||
divide: function(x, y) {
|
||||
this.x /= x || 1;
|
||||
this.y /= y || 1;
|
||||
return this
|
||||
},
|
||||
add: function(x, y) {
|
||||
this.x += x || 0;
|
||||
this.y += y || 0;
|
||||
return this
|
||||
},
|
||||
subtract: function(x, y) {
|
||||
this.x -= x || 0;
|
||||
this.y -= y || 0;
|
||||
return this
|
||||
},
|
||||
clampX: function(min, max) {
|
||||
this.x = Math.max(min, Math.min(this.x, max));
|
||||
return this
|
||||
},
|
||||
clampY: function(min, max) {
|
||||
this.y = Math.max(min, Math.min(this.y, max));
|
||||
return this
|
||||
},
|
||||
flipX: function() {
|
||||
this.x *= -1;
|
||||
return this
|
||||
},
|
||||
flipY: function() {
|
||||
this.y *= -1;
|
||||
return this
|
||||
}
|
||||
};
|
||||
var Factory = function(options) {
|
||||
Point.prototype = {
|
||||
constructor: Point,
|
||||
set: function (x, y) {
|
||||
this.x = x || 0;
|
||||
this.y = y || 0
|
||||
},
|
||||
copy: function (point) {
|
||||
this.x = point.x || 0;
|
||||
this.y = point.y || 0;
|
||||
return this
|
||||
},
|
||||
multiply: function (x, y) {
|
||||
this.x *= x || 1;
|
||||
this.y *= y || 1;
|
||||
return this
|
||||
},
|
||||
divide: function (x, y) {
|
||||
this.x /= x || 1;
|
||||
this.y /= y || 1;
|
||||
return this
|
||||
},
|
||||
add: function (x, y) {
|
||||
this.x += x || 0;
|
||||
this.y += y || 0;
|
||||
return this
|
||||
},
|
||||
subtract: function (x, y) {
|
||||
this.x -= x || 0;
|
||||
this.y -= y || 0;
|
||||
return this
|
||||
},
|
||||
clampX: function (min, max) {
|
||||
this.x = Math.max(min, Math.min(this.x, max));
|
||||
return this
|
||||
},
|
||||
clampY: function (min, max) {
|
||||
this.y = Math.max(min, Math.min(this.y, max));
|
||||
return this
|
||||
},
|
||||
flipX: function () {
|
||||
this.x *= -1;
|
||||
return this
|
||||
},
|
||||
flipY: function () {
|
||||
this.y *= -1;
|
||||
return this
|
||||
}
|
||||
};
|
||||
var Factory = function (options) {
|
||||
this._canvas = null;
|
||||
this._context = null;
|
||||
this._sto = null;
|
||||
@@ -123,202 +124,211 @@
|
||||
this.setOptions(options);
|
||||
this.init()
|
||||
};
|
||||
Factory.prototype = {
|
||||
constructor: Factory,
|
||||
setOptions: function(options) {
|
||||
if (typeof options === "object") {
|
||||
for (var key in options) {
|
||||
if (options.hasOwnProperty(key)) {
|
||||
this._options[key] = options[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
init: function() {
|
||||
try {
|
||||
this._canvas = document.createElement("canvas");
|
||||
this._canvas.style["display"] = "block";
|
||||
this._canvas.style["position"] = "fixed";
|
||||
this._canvas.style["margin"] = "0";
|
||||
this._canvas.style["padding"] = "0";
|
||||
this._canvas.style["border"] = "0";
|
||||
this._canvas.style["outline"] = "0";
|
||||
this._canvas.style["left"] = "0";
|
||||
this._canvas.style["top"] = "0";
|
||||
this._canvas.style["width"] = "100%";
|
||||
this._canvas.style["height"] = "100%";
|
||||
this._canvas.style["z-index"] = "-1";
|
||||
this._onResize();
|
||||
this._context = this._canvas.getContext("2d");
|
||||
this._context.clearRect(0, 0, this._width, this._height);
|
||||
this._context.globalAlpha = this._options.colorAlpha;
|
||||
window.addEventListener("resize", this._onResize);
|
||||
window.addEventListener("scroll", this._onScroll);
|
||||
document.body.appendChild(this._canvas)
|
||||
} catch (e) {
|
||||
console.warn("Canvas Context Error: " + e.toString());
|
||||
return
|
||||
}
|
||||
this._onDraw()
|
||||
},
|
||||
addRibbon: function() {
|
||||
var dir = Math.round(random(1, 9)) > 5 ? "right" : "left",
|
||||
stop = 1000,
|
||||
hide = 200,
|
||||
min = 0 - hide,
|
||||
max = this._width + hide,
|
||||
movex = 0,
|
||||
movey = 0,
|
||||
startx = dir === "right" ? min : max,
|
||||
starty = Math.round(random(0, this._height));
|
||||
if (/^(top|min)$/i.test(this._options.verticalPosition)) {
|
||||
starty = 0 + hide
|
||||
} else if (/^(middle|center)$/i.test(this._options.verticalPosition)) {
|
||||
starty = this._height / 2
|
||||
} else if (/^(bottom|max)$/i.test(this._options.verticalPosition)) {
|
||||
starty = this._height - hide
|
||||
}
|
||||
var ribbon = [],
|
||||
point1 = new Point(startx, starty),
|
||||
point2 = new Point(startx, starty),
|
||||
point3 = null,
|
||||
color = Math.round(random(0, 360)),
|
||||
delay = 0;
|
||||
while (true) {
|
||||
if (stop <= 0) break;
|
||||
stop--;
|
||||
movex = Math.round((Math.random() * 1 - 0.2) * this._options.horizontalSpeed);
|
||||
movey = Math.round((Math.random() * 1 - 0.5) * (this._height * 0.25));
|
||||
point3 = new Point();
|
||||
point3.copy(point2);
|
||||
if (dir === "right") {
|
||||
point3.add(movex, movey);
|
||||
if (point2.x >= max) break
|
||||
} else if (dir === "left") {
|
||||
point3.subtract(movex, movey);
|
||||
if (point2.x <= min) break
|
||||
}
|
||||
ribbon.push({
|
||||
point1: new Point(point1.x, point1.y),
|
||||
point2: new Point(point2.x, point2.y),
|
||||
point3: point3,
|
||||
color: color,
|
||||
delay: delay,
|
||||
dir: dir,
|
||||
alpha: 0,
|
||||
phase: 0
|
||||
});
|
||||
point1.copy(point2);
|
||||
point2.copy(point3);
|
||||
delay += 4;
|
||||
color += this._options.colorCycleSpeed
|
||||
}
|
||||
this._ribbons.push(ribbon)
|
||||
},
|
||||
_drawRibbonSection: function(section) {
|
||||
if (section) {
|
||||
if (section.phase >= 1 && section.alpha <= 0) {
|
||||
return true
|
||||
}
|
||||
if (section.delay <= 0) {
|
||||
section.phase += 0.02;
|
||||
section.alpha = Math.sin(section.phase) * 1;
|
||||
section.alpha = section.alpha <= 0 ? 0 : section.alpha;
|
||||
section.alpha = section.alpha >= 1 ? 1 : section.alpha;
|
||||
if (this._options.animateSections) {
|
||||
var mod = Math.sin(1 + section.phase * Math.PI / 2) * 0.1;
|
||||
if (section.dir === "right") {
|
||||
section.point1.add(mod, 0);
|
||||
section.point2.add(mod, 0);
|
||||
section.point3.add(mod, 0)
|
||||
} else {
|
||||
section.point1.subtract(mod, 0);
|
||||
section.point2.subtract(mod, 0);
|
||||
section.point3.subtract(mod, 0)
|
||||
Factory.prototype = {
|
||||
constructor: Factory,
|
||||
setOptions: function (options) {
|
||||
if (typeof options === "object") {
|
||||
for (var key in options) {
|
||||
if (options.hasOwnProperty(key)) {
|
||||
this._options[key] = options[key]
|
||||
}
|
||||
section.point1.add(0, mod);
|
||||
section.point2.add(0, mod);
|
||||
section.point3.add(0, mod)
|
||||
}
|
||||
} else {
|
||||
section.delay -= 0.5
|
||||
}
|
||||
var s = this._options.colorSaturation,
|
||||
l = this._options.colorBrightness,
|
||||
c = "hsla(" + section.color + ", " + s + ", " + l + ", " + section.alpha + " )";
|
||||
this._context.save();
|
||||
if (this._options.parallaxAmount !== 0) {
|
||||
this._context.translate(0, this._scroll * this._options.parallaxAmount)
|
||||
}
|
||||
this._context.beginPath();
|
||||
this._context.moveTo(section.point1.x, section.point1.y);
|
||||
this._context.lineTo(section.point2.x, section.point2.y);
|
||||
this._context.lineTo(section.point3.x, section.point3.y);
|
||||
this._context.fillStyle = c;
|
||||
this._context.fill();
|
||||
if (this._options.strokeSize > 0) {
|
||||
this._context.lineWidth = this._options.strokeSize;
|
||||
this._context.strokeStyle = c;
|
||||
this._context.lineCap = "round";
|
||||
this._context.stroke()
|
||||
}
|
||||
this._context.restore()
|
||||
}
|
||||
return false
|
||||
},
|
||||
_onDraw: function() {
|
||||
for (var i = 0, t = this._ribbons.length; i < t; ++i) {
|
||||
if (!this._ribbons[i]) {
|
||||
this._ribbons.splice(i, 1)
|
||||
}
|
||||
}
|
||||
this._context.clearRect(0, 0, this._width, this._height);
|
||||
for (var a = 0; a < this._ribbons.length; ++a) {
|
||||
var ribbon = this._ribbons[a],
|
||||
numSections = ribbon.length,
|
||||
numDone = 0;
|
||||
for (var b = 0; b < numSections; ++b) {
|
||||
if (this._drawRibbonSection(ribbon[b])) {
|
||||
numDone++
|
||||
}
|
||||
}
|
||||
if (numDone >= numSections) {
|
||||
this._ribbons[a] = null
|
||||
},
|
||||
init: function () {
|
||||
try {
|
||||
this._canvas = document.createElement("canvas");
|
||||
this._canvas.style["display"] = "block";
|
||||
this._canvas.style["position"] = "fixed";
|
||||
this._canvas.style["margin"] = "0";
|
||||
this._canvas.style["padding"] = "0";
|
||||
this._canvas.style["border"] = "0";
|
||||
this._canvas.style["outline"] = "0";
|
||||
this._canvas.style["left"] = "0";
|
||||
this._canvas.style["top"] = "0";
|
||||
this._canvas.style["width"] = "100%";
|
||||
this._canvas.style["height"] = "100%";
|
||||
this._canvas.style["z-index"] = "-1";
|
||||
this._onResize();
|
||||
this._context = this._canvas.getContext("2d");
|
||||
this._context.clearRect(0, 0, this._width, this._height);
|
||||
this._context.globalAlpha = this._options.colorAlpha;
|
||||
window.addEventListener("resize", this._onResize);
|
||||
window.addEventListener("scroll", this._onScroll);
|
||||
document.body.appendChild(this._canvas)
|
||||
} catch (e) {
|
||||
console.warn("Canvas Context Error: " + e.toString());
|
||||
return
|
||||
}
|
||||
}
|
||||
if (this._ribbons.length < this._options.ribbonCount) {
|
||||
this.addRibbon()
|
||||
}
|
||||
requestAnimationFrame(this._onDraw)
|
||||
},
|
||||
_onResize: function(e) {
|
||||
var screen = screenInfo(e);
|
||||
this._width = screen.width;
|
||||
this._height = screen.height;
|
||||
if (this._canvas) {
|
||||
this._canvas.width = this._width;
|
||||
this._canvas.height = this._height;
|
||||
if (this._context) {
|
||||
this._context.globalAlpha = this._options.colorAlpha
|
||||
this._onDraw()
|
||||
},
|
||||
addRibbon: function () {
|
||||
var dir = Math.round(random(1, 9)) > 5 ? "right" : "left",
|
||||
stop = 1000,
|
||||
hide = 200,
|
||||
min = 0 - hide,
|
||||
max = this._width + hide,
|
||||
movex = 0,
|
||||
movey = 0,
|
||||
startx = dir === "right" ? min : max,
|
||||
starty = Math.round(random(0, this._height));
|
||||
if (/^(top|min)$/i.test(this._options.verticalPosition)) {
|
||||
starty = 0 + hide
|
||||
} else if (/^(middle|center)$/i.test(this._options.verticalPosition)) {
|
||||
starty = this._height / 2
|
||||
} else if (/^(bottom|max)$/i.test(this._options.verticalPosition)) {
|
||||
starty = this._height - hide
|
||||
}
|
||||
var ribbon = [],
|
||||
point1 = new Point(startx, starty),
|
||||
point2 = new Point(startx, starty),
|
||||
point3 = null,
|
||||
color = Math.round(random(0, 360)),
|
||||
delay = 0;
|
||||
while (true) {
|
||||
if (stop <= 0) break;
|
||||
stop--;
|
||||
movex = Math.round((Math.random() * 1 - 0.2) * this._options.horizontalSpeed);
|
||||
movey = Math.round((Math.random() * 1 - 0.5) * (this._height * 0.25));
|
||||
point3 = new Point();
|
||||
point3.copy(point2);
|
||||
if (dir === "right") {
|
||||
point3.add(movex, movey);
|
||||
if (point2.x >= max) break
|
||||
} else if (dir === "left") {
|
||||
point3.subtract(movex, movey);
|
||||
if (point2.x <= min) break
|
||||
}
|
||||
ribbon.push({
|
||||
point1: new Point(point1.x, point1.y),
|
||||
point2: new Point(point2.x, point2.y),
|
||||
point3: point3,
|
||||
color: color,
|
||||
delay: delay,
|
||||
dir: dir,
|
||||
alpha: 0,
|
||||
phase: 0
|
||||
});
|
||||
point1.copy(point2);
|
||||
point2.copy(point3);
|
||||
delay += 4;
|
||||
color += this._options.colorCycleSpeed
|
||||
}
|
||||
this._ribbons.push(ribbon)
|
||||
},
|
||||
_drawRibbonSection: function (section) {
|
||||
if (section) {
|
||||
if (section.phase >= 1 && section.alpha <= 0) {
|
||||
return true
|
||||
}
|
||||
if (section.delay <= 0) {
|
||||
section.phase += 0.02;
|
||||
section.alpha = Math.sin(section.phase) * 1;
|
||||
section.alpha = section.alpha <= 0 ? 0 : section.alpha;
|
||||
section.alpha = section.alpha >= 1 ? 1 : section.alpha;
|
||||
if (this._options.animateSections) {
|
||||
var mod = Math.sin(1 + section.phase * Math.PI / 2) * 0.1;
|
||||
if (section.dir === "right") {
|
||||
section.point1.add(mod, 0);
|
||||
section.point2.add(mod, 0);
|
||||
section.point3.add(mod, 0)
|
||||
} else {
|
||||
section.point1.subtract(mod, 0);
|
||||
section.point2.subtract(mod, 0);
|
||||
section.point3.subtract(mod, 0)
|
||||
}
|
||||
section.point1.add(0, mod);
|
||||
section.point2.add(0, mod);
|
||||
section.point3.add(0, mod)
|
||||
}
|
||||
} else {
|
||||
section.delay -= 0.5
|
||||
}
|
||||
var s = this._options.colorSaturation,
|
||||
l = this._options.colorBrightness,
|
||||
c = "hsla(" + section.color + ", " + s + ", " + l + ", " + section.alpha + " )";
|
||||
this._context.save();
|
||||
if (this._options.parallaxAmount !== 0) {
|
||||
this._context.translate(0, this._scroll * this._options.parallaxAmount)
|
||||
}
|
||||
this._context.beginPath();
|
||||
this._context.moveTo(section.point1.x, section.point1.y);
|
||||
this._context.lineTo(section.point2.x, section.point2.y);
|
||||
this._context.lineTo(section.point3.x, section.point3.y);
|
||||
this._context.fillStyle = c;
|
||||
this._context.fill();
|
||||
if (this._options.strokeSize > 0) {
|
||||
this._context.lineWidth = this._options.strokeSize;
|
||||
this._context.strokeStyle = c;
|
||||
this._context.lineCap = "round";
|
||||
this._context.stroke()
|
||||
}
|
||||
this._context.restore()
|
||||
}
|
||||
return false
|
||||
},
|
||||
_onDraw: function () {
|
||||
for (var i = 0, t = this._ribbons.length; i < t; ++i) {
|
||||
if (!this._ribbons[i]) {
|
||||
this._ribbons.splice(i, 1)
|
||||
}
|
||||
}
|
||||
this._context.clearRect(0, 0, this._width, this._height);
|
||||
for (var a = 0; a < this._ribbons.length; ++a) {
|
||||
var ribbon = this._ribbons[a],
|
||||
numSections = ribbon.length,
|
||||
numDone = 0;
|
||||
for (var b = 0; b < numSections; ++b) {
|
||||
if (this._drawRibbonSection(ribbon[b])) {
|
||||
numDone++
|
||||
}
|
||||
}
|
||||
if (numDone >= numSections) {
|
||||
this._ribbons[a] = null
|
||||
}
|
||||
}
|
||||
if (this._ribbons.length < this._options.ribbonCount) {
|
||||
this.addRibbon()
|
||||
}
|
||||
requestAnimationFrame(this._onDraw)
|
||||
},
|
||||
_onResize: function (e) {
|
||||
var screen = screenInfo(e);
|
||||
this._width = screen.width;
|
||||
this._height = screen.height;
|
||||
if (this._canvas) {
|
||||
this._canvas.width = this._width;
|
||||
this._canvas.height = this._height;
|
||||
if (this._context) {
|
||||
this._context.globalAlpha = this._options.colorAlpha
|
||||
}
|
||||
}
|
||||
},
|
||||
_onScroll: function (e) {
|
||||
var screen = screenInfo(e);
|
||||
this._scroll = screen.scrolly
|
||||
}
|
||||
},
|
||||
_onScroll: function(e) {
|
||||
var screen = screenInfo(e);
|
||||
this._scroll = screen.scrolly
|
||||
}
|
||||
};
|
||||
return Factory
|
||||
});
|
||||
new Ribbons({
|
||||
colorSaturation: "60%",
|
||||
colorBrightness: "50%",
|
||||
colorAlpha: 0.5,
|
||||
colorCycleSpeed: 5,
|
||||
verticalPosition: "random",
|
||||
horizontalSpeed: 200,
|
||||
ribbonCount: 3,
|
||||
strokeSize: 0,
|
||||
parallaxAmount: -0.2,
|
||||
animateSections: true
|
||||
});
|
||||
};
|
||||
return Factory
|
||||
});
|
||||
|
||||
var cn = document.getElementById('ribbon_piao');
|
||||
var mb = cn.getAttribute("mobile");
|
||||
|
||||
if ( mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
|
||||
|
||||
} else {
|
||||
new Ribbons({
|
||||
colorSaturation: "60%",
|
||||
colorBrightness: "50%",
|
||||
colorAlpha: 0.5,
|
||||
colorCycleSpeed: 5,
|
||||
verticalPosition: "random",
|
||||
horizontalSpeed: 200,
|
||||
ribbonCount: 3,
|
||||
strokeSize: 0,
|
||||
parallaxAmount: -0.2,
|
||||
animateSections: true
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user