update-search
parent
201b6e98fa
commit
a435fb1fb6
@ -0,0 +1,88 @@
|
||||
! 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 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)
|
||||
}();
|
||||
@ -0,0 +1,91 @@
|
||||
/**
|
||||
* Copyright (c) 2016 hustcc
|
||||
* License: MIT
|
||||
* Version: v1.0.1
|
||||
* GitHub: https://github.com/hustcc/ribbon.js
|
||||
**/
|
||||
|
||||
!(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
|
||||
}
|
||||
return Number(node.getAttribute(attr)) || default_value
|
||||
}
|
||||
|
||||
var canvas = document.createElement('canvas'),
|
||||
g2d = canvas.getContext('2d'),
|
||||
pr = window.devicePixelRatio || 1,
|
||||
width = window.innerWidth,
|
||||
height = window.innerHeight,
|
||||
f = config.s,
|
||||
q,
|
||||
t,
|
||||
m = Math,
|
||||
r = 0,
|
||||
pi = m.PI * 2,
|
||||
cos = m.cos,
|
||||
random = m.random
|
||||
canvas.width = width * pr
|
||||
canvas.height = height * pr
|
||||
g2d.scale(pr, pr)
|
||||
g2d.globalAlpha = config.a
|
||||
canvas.style.cssText =
|
||||
'opacity: ' +
|
||||
config.a +
|
||||
';position:fixed;top:0;left:0;z-index: ' +
|
||||
config.z +
|
||||
';width:100%;height:100%;pointer-events:none;'
|
||||
// create canvas
|
||||
document.getElementsByTagName('body')[0].appendChild(canvas)
|
||||
|
||||
function redraw () {
|
||||
g2d.clearRect(0, 0, width, height)
|
||||
q = [{ x: 0, y: height * 0.7 + f }, { x: 0, y: height * 0.7 - f }]
|
||||
while (q[1].x < width + f) draw(q[0], q[1])
|
||||
}
|
||||
function draw (i, j) {
|
||||
g2d.beginPath()
|
||||
g2d.moveTo(i.x, i.y)
|
||||
g2d.lineTo(j.x, j.y)
|
||||
var k = j.x + (random() * 2 - 0.25) * f,
|
||||
n = line(j.y)
|
||||
g2d.lineTo(k, n)
|
||||
g2d.closePath()
|
||||
r -= pi / -50
|
||||
g2d.fillStyle =
|
||||
'#' +
|
||||
(
|
||||
((cos(r) * 127 + 128) << 16) |
|
||||
((cos(r + pi / 3) * 127 + 128) << 8) |
|
||||
(cos(r + (pi / 3) * 2) * 127 + 128)
|
||||
).toString(16)
|
||||
g2d.fill()
|
||||
q[0] = q[1]
|
||||
q[1] = { x: k, y: n }
|
||||
}
|
||||
function line (p) {
|
||||
t = p + (random() * 2 - 1.1) * f
|
||||
return t > height || t < 0 ? line(p) : t
|
||||
}
|
||||
if (config.c !== 'false') {
|
||||
document.onclick = redraw
|
||||
document.ontouchstart = redraw
|
||||
}
|
||||
redraw()
|
||||
})()
|
||||
@ -0,0 +1,73 @@
|
||||
!(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 += 0.004),
|
||||
(n[a].alpha -= 0.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);
|
||||
@ -0,0 +1,129 @@
|
||||
var canvasEl = document.querySelector('.fireworks')
|
||||
if (canvasEl) {
|
||||
var ctx = canvasEl.getContext('2d')
|
||||
var numberOfParticules = 50
|
||||
var pointerX = 0
|
||||
var pointerY = 0
|
||||
// var tap = ('ontouchstart' in window || navigator.msMaxTouchPoints) ? 'touchstart' : 'mousedown'
|
||||
// Fixed the mobile scroll
|
||||
var tap = 'mousedown'
|
||||
var colors = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C']
|
||||
|
||||
var setCanvasSize = debounce(function () {
|
||||
canvasEl.width = window.innerWidth
|
||||
canvasEl.height = window.innerHeight
|
||||
canvasEl.style.width = window.innerWidth + 'px'
|
||||
canvasEl.style.height = window.innerHeight + 'px'
|
||||
canvasEl.getContext('2d').scale(1, 1)
|
||||
}, 500)
|
||||
|
||||
var render = anime({
|
||||
duration: Infinity,
|
||||
update: function () {
|
||||
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
|
||||
}
|
||||
})
|
||||
|
||||
document.addEventListener(tap, function (e) {
|
||||
if (e.target.id !== 'sidebar' && e.target.id !== 'toggle-sidebar' && e.target.nodeName !== 'A' && e.target.nodeName !== 'IMG') {
|
||||
render.play()
|
||||
updateCoords(e)
|
||||
animateParticules(pointerX, pointerY)
|
||||
}
|
||||
}, false)
|
||||
|
||||
setCanvasSize()
|
||||
window.addEventListener('resize', setCanvasSize, false)
|
||||
}
|
||||
|
||||
function updateCoords(e) {
|
||||
pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left
|
||||
pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top
|
||||
}
|
||||
|
||||
function setParticuleDirection(p) {
|
||||
var angle = anime.random(0, 360) * Math.PI / 180
|
||||
var value = anime.random(50, 180)
|
||||
var radius = [-2, 2][anime.random(0, 1)] * value
|
||||
return {
|
||||
x: p.x + radius * Math.cos(angle),
|
||||
y: p.y + radius * Math.sin(angle)
|
||||
}
|
||||
}
|
||||
|
||||
function createParticule(x, y) {
|
||||
var p = {}
|
||||
p.x = x
|
||||
p.y = y
|
||||
p.color = colors[anime.random(0, colors.length - 1)]
|
||||
p.radius = anime.random(16, 32)
|
||||
p.endPos = setParticuleDirection(p)
|
||||
p.draw = function () {
|
||||
ctx.beginPath()
|
||||
ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
|
||||
ctx.fillStyle = p.color
|
||||
ctx.fill()
|
||||
}
|
||||
return p
|
||||
}
|
||||
|
||||
function createCircle(x, y) {
|
||||
var p = {}
|
||||
p.x = x
|
||||
p.y = y
|
||||
p.color = '#F00'
|
||||
p.radius = 0.1
|
||||
p.alpha = 0.5
|
||||
p.lineWidth = 6
|
||||
p.draw = function () {
|
||||
ctx.globalAlpha = p.alpha
|
||||
ctx.beginPath()
|
||||
ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
|
||||
ctx.lineWidth = p.lineWidth
|
||||
ctx.strokeStyle = p.color
|
||||
ctx.stroke()
|
||||
ctx.globalAlpha = 1
|
||||
}
|
||||
return p
|
||||
}
|
||||
|
||||
function renderParticule(anim) {
|
||||
for (var i = 0; i < anim.animatables.length; i++) {
|
||||
anim.animatables[i].target.draw()
|
||||
}
|
||||
}
|
||||
|
||||
function animateParticules(x, y) {
|
||||
var circle = createCircle(x, y)
|
||||
var particules = []
|
||||
for (var i = 0; i < numberOfParticules; i++) {
|
||||
particules.push(createParticule(x, y))
|
||||
}
|
||||
anime.timeline().add({
|
||||
targets: particules,
|
||||
x: function (p) {
|
||||
return p.endPos.x
|
||||
},
|
||||
y: function (p) {
|
||||
return p.endPos.y
|
||||
},
|
||||
radius: 0.1,
|
||||
duration: anime.random(1200, 2800),
|
||||
easing: 'easeOutExpo',
|
||||
update: renderParticule
|
||||
})
|
||||
.add({
|
||||
targets: circle,
|
||||
radius: anime.random(80, 160),
|
||||
lineWidth: 0,
|
||||
alpha: {
|
||||
value: 0,
|
||||
easing: 'linear',
|
||||
duration: anime.random(600, 1800)
|
||||
},
|
||||
duration: anime.random(1200, 2800),
|
||||
easing: 'easeOutExpo',
|
||||
update: renderParticule,
|
||||
offset: 0
|
||||
})
|
||||
}
|
||||
Binary file not shown.
Loading…
Reference in New Issue