From 8b1109bf90e7cc6cc983a9a30a55ace3c6686ee8 Mon Sep 17 00:00:00 2001 From: Vixcity <2091283625@qq.com> Date: Sat, 11 May 2024 21:09:36 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E7=82=BC=20=E9=9D=99/=E5=8A=A8?= =?UTF-8?q?=E6=80=81=E5=BD=A9=E5=B8=A6=E7=89=B9=E6=95=88=E3=80=81=E6=98=9F?= =?UTF-8?q?=E7=A9=BA=E9=9B=A8=E7=89=B9=E6=95=88=20=E5=88=B0public=EF=BC=8C?= =?UTF-8?q?=E4=BC=98=E5=8C=96=20=E7=BA=BF=E6=AE=B5=E7=B2=92=E5=AD=90?= =?UTF-8?q?=E7=89=B9=E6=95=88=E5=92=8C=E6=A8=B1=E8=8A=B1=E7=89=B9=E6=95=88?= =?UTF-8?q?=20=E5=9C=A8public=E4=B8=AD=E7=9A=84=E4=BB=A3=E7=A0=81=20?= =?UTF-8?q?=E7=89=B9=E6=95=88=E5=B7=B2=E7=BB=8F=E5=85=A8=E9=83=A8=E5=B0=81?= =?UTF-8?q?=E8=A3=85=E5=88=B0public=E5=BD=93=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/FlutteringRibbon.js | 325 +-------------------------------- components/Ribbon.js | 96 +--------- components/StarrySky.js | 128 +------------ public/js/flutteringRibbon.js | 313 +++++++++++++++++++++++++++++++ public/js/nest.js | 6 +- public/js/ribbon.js | 89 +++++++++ public/js/sakura.js | 4 +- public/js/starrySky.js | 129 +++++++++++++ 8 files changed, 559 insertions(+), 531 deletions(-) create mode 100644 public/js/flutteringRibbon.js create mode 100644 public/js/ribbon.js create mode 100644 public/js/starrySky.js diff --git a/components/FlutteringRibbon.js b/components/FlutteringRibbon.js index eb0f03e0..321649b3 100644 --- a/components/FlutteringRibbon.js +++ b/components/FlutteringRibbon.js @@ -1,322 +1,17 @@ /* eslint-disable */ import { useEffect } from 'react' -const id = 'canvasFlutteringRibbon' -export const FlutteringRibbon = () => { - const destroyRibbon = ()=>{ - const ribbon = document.getElementById(id) - if(ribbon && ribbon.parentNode){ - ribbon.parentNode.removeChild(ribbon) - } - } - - useEffect(() => { - createFlutteringRibbon() - return () => destroyRibbon() +import { loadExternalResource } from '@/lib/utils' +export const FlutteringRibbon = () => { + useEffect(() => { + loadExternalResource('/js/flutteringRibbon.js', 'js').then(url => { + window.createFlutteringRibbon && window.createFlutteringRibbon() + }) + + return () => + window.destroyFlutteringRibbon && window.destroyFlutteringRibbon() }, []) - return <> + return <> } export default FlutteringRibbon - - -/** - * 创建连接点 - * @param config - */ -function createFlutteringRibbon() { - 'object' == typeof window && - (window.Ribbons = (function () { - const t = window, - i = document.body, - n = document.documentElement - var o = function () { - if (1 === arguments.length) { - if (Array.isArray(arguments[0])) { - const t = Math.round(o(0, arguments[0].length - 1)) - return arguments[0][t] - } - return o(0, arguments[0]) - } - return 2 === arguments.length - ? Math.random() * (arguments[1] - arguments[0]) + arguments[0] - : 0 - } - const s = function (o) { - const s = Math.max( - 0, - t.innerWidth || n.clientWidth || i.clientWidth || 0 - ), - e = Math.max( - 0, - t.innerHeight || n.clientHeight || i.clientHeight || 0 - ) - return { - width: s, - height: e, - ratio: s / e, - centerx: s / 2, - centery: e / 2, - scrollx: - Math.max(0, t.pageXOffset || n.scrollLeft || i.scrollLeft || 0) - - (n.clientLeft || 0), - scrolly: - Math.max(0, t.pageYOffset || n.scrollTop || i.scrollTop || 0) - - (n.clientTop || 0) - } - }, - e = function (t, i) { - ;(this.x = 0), (this.y = 0), this.set(t, i) - } - e.prototype = { - constructor: e, - set: function (t, i) { - ;(this.x = t || 0), (this.y = i || 0) - }, - copy: function (t) { - return (this.x = t.x || 0), (this.y = t.y || 0), this - }, - multiply: function (t, i) { - return (this.x *= t || 1), (this.y *= i || 1), this - }, - divide: function (t, i) { - return (this.x /= t || 1), (this.y /= i || 1), this - }, - add: function (t, i) { - return (this.x += t || 0), (this.y += i || 0), this - }, - subtract: function (t, i) { - return (this.x -= t || 0), (this.y -= i || 0), this - }, - clampX: function (t, i) { - return (this.x = Math.max(t, Math.min(this.x, i))), this - }, - clampY: function (t, i) { - return (this.y = Math.max(t, Math.min(this.y, i))), this - }, - flipX: function () { - return (this.x *= -1), this - }, - flipY: function () { - return (this.y *= -1), this - } - } - const h = function (t) { - ;(this._canvas = null), - (this._context = null), - (this._sto = null), - (this._width = 0), - (this._height = 0), - (this._scroll = 0), - (this._ribbons = []), - (this._options = { - colorSaturation: '80%', - colorBrightness: '60%', - colorAlpha: 0.65, - colorCycleSpeed: 6, - verticalPosition: 'center', - horizontalSpeed: 150, - ribbonCount: 5, - strokeSize: 5, - parallaxAmount: -0.5, - animateSections: !0 - }), - (this._onDraw = this._onDraw.bind(this)), - (this._onResize = this._onResize.bind(this)), - (this._onScroll = this._onScroll.bind(this)), - this.setOptions(t), - this.init() - } - return ( - (h.prototype = { - constructor: h, - setOptions: function (t) { - if ('object' == typeof t) - for (const i in t) - t.hasOwnProperty(i) && (this._options[i] = t[i]) - }, - init: function () { - try { - ;(this._canvas = document.createElement('canvas')), - (this._canvas.id = id), - (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'] = '0'), - (this._canvas.style['pointer-events'] = 'none'), - 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 (t) { - return void console.warn('Canvas Context Error: ' + t.toString()) - } - this._onDraw() - }, - addRibbon: function () { - const t = Math.round(o(1, 9)) > 5 ? 'right' : 'left' - let i = 1e3 - const n = 200, - s = 0 - n, - h = this._width + n - let a = 0, - r = 0 - const l = 'right' === t ? s : h - let c = Math.round(o(0, this._height)) - ;/^(top|min)$/i.test(this._options.verticalPosition) - ? (c = 0 + n) - : /^(middle|center)$/i.test(this._options.verticalPosition) - ? (c = this._height / 2) - : /^(bottom|max)$/i.test(this._options.verticalPosition) && - (c = this._height - n) - const p = [], - _ = new e(l, c), - d = new e(l, c) - let u = null, - b = Math.round(o(0, 360)), - f = 0 - for (; !(i <= 0); ) { - if ( - (i--, - (a = Math.round( - (1 * Math.random() - 0.2) * this._options.horizontalSpeed - )), - (r = Math.round( - (1 * Math.random() - 0.5) * (0.25 * this._height) - )), - (u = new e()), - u.copy(d), - 'right' === t) - ) { - if ((u.add(a, r), d.x >= h)) break - } else if ('left' === t && (u.subtract(a, r), d.x <= s)) break - p.push({ - point1: new e(_.x, _.y), - point2: new e(d.x, d.y), - point3: u, - color: b, - delay: f, - dir: t, - alpha: 0, - phase: 0 - }), - _.copy(d), - d.copy(u), - (f += 4), - (b += this._options.colorCycleSpeed) - } - this._ribbons.push(p) - }, - _drawRibbonSection: function (t) { - if (t) { - if (t.phase >= 1 && t.alpha <= 0) return !0 - if (t.delay <= 0) { - if ( - ((t.phase += 0.02), - (t.alpha = 1 * Math.sin(t.phase)), - (t.alpha = t.alpha <= 0 ? 0 : t.alpha), - (t.alpha = t.alpha >= 1 ? 1 : t.alpha), - this._options.animateSections) - ) { - const i = 0.1 * Math.sin(1 + (t.phase * Math.PI) / 2) - 'right' === t.dir - ? (t.point1.add(i, 0), - t.point2.add(i, 0), - t.point3.add(i, 0)) - : (t.point1.subtract(i, 0), - t.point2.subtract(i, 0), - t.point3.subtract(i, 0)), - t.point1.add(0, i), - t.point2.add(0, i), - t.point3.add(0, i) - } - } else t.delay -= 0.5 - const i = this._options.colorSaturation, - n = this._options.colorBrightness, - o = - 'hsla(' + - t.color + - ', ' + - i + - ', ' + - n + - ', ' + - t.alpha + - ' )' - this._context.save(), - 0 !== this._options.parallaxAmount && - this._context.translate( - 0, - this._scroll * this._options.parallaxAmount - ), - this._context.beginPath(), - this._context.moveTo(t.point1.x, t.point1.y), - this._context.lineTo(t.point2.x, t.point2.y), - this._context.lineTo(t.point3.x, t.point3.y), - (this._context.fillStyle = o), - this._context.fill(), - this._options.strokeSize > 0 && - ((this._context.lineWidth = this._options.strokeSize), - (this._context.strokeStyle = o), - (this._context.lineCap = 'round'), - this._context.stroke()), - this._context.restore() - } - return !1 - }, - _onDraw: function () { - for (let t = 0, i = this._ribbons.length; t < i; ++t) - this._ribbons[t] || this._ribbons.splice(t, 1) - this._context.clearRect(0, 0, this._width, this._height) - for (let t = 0; t < this._ribbons.length; ++t) { - const i = this._ribbons[t], - n = i.length - let o = 0 - for (let t = 0; t < n; ++t) this._drawRibbonSection(i[t]) && o++ - o >= n && (this._ribbons[t] = null) - } - this._ribbons.length < this._options.ribbonCount && - this.addRibbon(), - requestAnimationFrame(this._onDraw) - }, - _onResize: function (t) { - const i = s(t) - ;(this._width = i.width), - (this._height = i.height), - this._canvas && - ((this._canvas.width = this._width), - (this._canvas.height = this._height), - this._context && - (this._context.globalAlpha = this._options.colorAlpha)) - }, - _onScroll: function (t) { - const i = s(t) - this._scroll = i.scrolly - } - }), - h - ) - })()) - new Ribbons({ - colorSaturation: '60%', - colorBrightness: '50%', - colorAlpha: 0.5, - colorCycleSpeed: 5, - verticalPosition: 'random', - horizontalSpeed: 200, - ribbonCount: 3, - strokeSize: 0, - parallaxAmount: -0.2, - animateSections: !0 - }) -} diff --git a/components/Ribbon.js b/components/Ribbon.js index 468cf443..f437f314 100644 --- a/components/Ribbon.js +++ b/components/Ribbon.js @@ -1,98 +1,16 @@ -/* eslint-disable */ import { useEffect } from 'react' -const id = 'canvasRibbon' +import { loadExternalResource } from '@/lib/utils' const Ribbon = () => { - const destroyRibbon = ()=>{ - const ribbon = document.getElementById(id) - if(ribbon && ribbon.parentNode){ - ribbon.parentNode.removeChild(ribbon) - } - } - useEffect(() => { - createRibbon() - return () => destroyRibbon() + loadExternalResource('/js/ribbon.js', 'js').then(url => { + window.createRibbon && window.createRibbon() + }) + + return () => window.destroyRibbon && window.destroyRibbon() }, []) + return <> } export default Ribbon - -/** - * 创建连接点 - * @param config - */ -function createRibbon() { - !(function () { - const t = document.getElementById('__next') - const e = { - z: n(t, 'zIndex', 0), - a: n(t, 'alpha', 0.6), - s: n(t, 'size', 90), - c: t.getAttribute('data-click') - } - function n(t, e, n) { - return Number(t.getAttribute(e)) || n - } - const i = document.createElement('canvas'), - o = i.getContext('2d'), - c = window.devicePixelRatio || 1, - a = window.innerWidth, - l = window.innerHeight, - d = e.s - i.id= id - let r, s - const u = Math - let h = 0 - const g = 2 * u.PI, - f = u.cos, - m = u.random - function x() { - for ( - o.clearRect(0, 0, a, l), - r = [ - { x: 0, y: 0.7 * l + d }, - { x: 0, y: 0.7 * l - d } - ]; - r[1].x < a + d; - - ) - y(r[0], r[1]) - } - function y(t, e) { - o.beginPath(), o.moveTo(t.x, t.y), o.lineTo(e.x, e.y) - const n = e.x + (2 * m() - 0.25) * d, - i = b(e.y) - o.lineTo(n, i), - o.closePath(), - (h -= g / -50), - (o.fillStyle = - '#' + - ( - ((127 * f(h) + 128) << 16) | - ((127 * f(h + g / 3) + 128) << 8) | - (127 * f(h + (g / 3) * 2) + 128) - ).toString(16)), - o.fill(), - (r[0] = r[1]), - (r[1] = { x: n, y: i }) - } - function b(t) { - return (s = t + (2 * m() - 1.1) * d), s > l || s < 0 ? b(t) : s - } - ;(i.width = a * c), - (i.height = l * c), - o.scale(c, c), - (o.globalAlpha = e.a), - (i.style.cssText = - 'opacity: ' + - e.a + - ';position:fixed;top:0;left:0;z-index: ' + - e.z + - ';width:100%;height:100%;pointer-events:none;'), - document.getElementsByTagName('body')[0].appendChild(i), - 'false' !== e.c && ((document.onclick = x), (document.ontouchstart = x)), - x() - })() -} diff --git a/components/StarrySky.js b/components/StarrySky.js index e0fd3ac4..7984ec2a 100644 --- a/components/StarrySky.js +++ b/components/StarrySky.js @@ -1,131 +1,15 @@ -/* eslint-disable */ -import { useEffect } from 'react' +import { useEffect } from 'react' +import { loadExternalResource } from '@/lib/utils' const StarrySky = () => { useEffect(() => { - renderStarrySky() + loadExternalResource('/js/starrySky.js', 'js').then(url => { + window.renderStarrySky && window.renderStarrySky() + }) }, []) return ( -
- -
+ <> ) } export default StarrySky - -/** - * 创建星空雨 - * @param config - */ -function renderStarrySky() { - window.requestAnimationFrame = - window.requestAnimationFrame || - window.mozRequestAnimationFrame || - window.webkitRequestAnimationFrame || - window.msRequestAnimationFrame - var n, - e, - i, - h, - t = 0.05, - s = document.getElementById('starry-sky-vixcity'), - o = !0, - a = '180,184,240', - r = '226,225,142', - d = '226,225,224', - c = [] - function f() { - ;(n = window.innerWidth), - (e = window.innerHeight), - (i = 0.216 * n), - s.setAttribute('width', n), - s.setAttribute('height', e) - } - function u() { - h.clearRect(0, 0, n, e) - for (var t = c.length, i = 0; i < t; i++) { - var s = c[i] - s.move(), s.fadeIn(), s.fadeOut(), s.draw() - } - } - function y() { - ;(this.reset = function () { - ;(this.giant = m(3)), - (this.comet = !this.giant && !o && m(10)), - (this.x = l(0, n - 10)), - (this.y = l(0, e)), - (this.r = l(1.1, 2.6)), - (this.dx = l(t, 6 * t) + (this.comet + 1 - 1) * t * l(50, 120) + 2 * t), - (this.dy = -l(t, 6 * t) - (this.comet + 1 - 1) * t * l(50, 120)), - (this.fadingOut = null), - (this.fadingIn = !0), - (this.opacity = 0), - (this.opacityTresh = l(0.2, 1 - 0.4 * (this.comet + 1 - 1))), - (this.do = l(5e-4, 0.002) + 0.001 * (this.comet + 1 - 1)) - }), - (this.fadeIn = function () { - this.fadingIn && - ((this.fadingIn = !(this.opacity > this.opacityTresh)), - (this.opacity += this.do)) - }), - (this.fadeOut = function () { - this.fadingOut && - ((this.fadingOut = !(this.opacity < 0)), - (this.opacity -= this.do / 2), - (this.x > n || this.y < 0) && ((this.fadingOut = !1), this.reset())) - }), - (this.draw = function () { - if ((h.beginPath(), this.giant)) - (h.fillStyle = 'rgba(' + a + ',' + this.opacity + ')'), - h.arc(this.x, this.y, 2, 0, 2 * Math.PI, !1) - else if (this.comet) { - ;(h.fillStyle = 'rgba(' + d + ',' + this.opacity + ')'), - h.arc(this.x, this.y, 1.5, 0, 2 * Math.PI, !1) - for (var t = 0; t < 30; t++) - (h.fillStyle = - 'rgba(' + - d + - ',' + - (this.opacity - (this.opacity / 20) * t) + - ')'), - h.rect( - this.x - (this.dx / 4) * t, - this.y - (this.dy / 4) * t - 2, - 2, - 2 - ), - h.fill() - } else - (h.fillStyle = 'rgba(' + r + ',' + this.opacity + ')'), - h.rect(this.x, this.y, this.r, this.r) - h.closePath(), h.fill() - }), - (this.move = function () { - ;(this.x += this.dx), - (this.y += this.dy), - !1 === this.fadingOut && this.reset(), - (this.x > n - n / 4 || this.y < 0) && (this.fadingOut = !0) - }), - setTimeout(function () { - o = !1 - }, 50) - } - function m(t) { - return Math.floor(1e3 * Math.random()) + 1 < 10 * t - } - function l(t, i) { - return Math.random() * (i - t) + t - } - f(), - window.addEventListener('resize', f, !1), - (function () { - h = s.getContext('2d') - for (var t = 0; t < i; t++) (c[t] = new y()), c[t].reset() - u() - })(), - (function t() { - document.getElementsByTagName('html')[0].className.indexOf('dark')>=0 && u(), - window.requestAnimationFrame(t) - })() -} diff --git a/public/js/flutteringRibbon.js b/public/js/flutteringRibbon.js new file mode 100644 index 00000000..d698a117 --- /dev/null +++ b/public/js/flutteringRibbon.js @@ -0,0 +1,313 @@ +/* eslint-disable */ +const idFlutteringRibbon = 'canvasFlutteringRibbon' + +function destroyFlutteringRibbon() { + const ribbon = document.getElementById(idFlutteringRibbon) + if (ribbon && ribbon.parentNode) { + ribbon.parentNode.removeChild(ribbon) + } +} + +/** + * 创建连接点 + * @param config + */ +function createFlutteringRibbon() { + 'object' == typeof window && + (window.Ribbons = (function () { + const t = window, + i = document.body, + n = document.documentElement + var o = function () { + if (1 === arguments.length) { + if (Array.isArray(arguments[0])) { + const t = Math.round(o(0, arguments[0].length - 1)) + return arguments[0][t] + } + return o(0, arguments[0]) + } + return 2 === arguments.length + ? Math.random() * (arguments[1] - arguments[0]) + arguments[0] + : 0 + } + const s = function (o) { + const s = Math.max( + 0, + t.innerWidth || n.clientWidth || i.clientWidth || 0 + ), + e = Math.max( + 0, + t.innerHeight || n.clientHeight || i.clientHeight || 0 + ) + return { + width: s, + height: e, + ratio: s / e, + centerx: s / 2, + centery: e / 2, + scrollx: + Math.max(0, t.pageXOffset || n.scrollLeft || i.scrollLeft || 0) - + (n.clientLeft || 0), + scrolly: + Math.max(0, t.pageYOffset || n.scrollTop || i.scrollTop || 0) - + (n.clientTop || 0) + } + }, + e = function (t, i) { + ;(this.x = 0), (this.y = 0), this.set(t, i) + } + e.prototype = { + constructor: e, + set: function (t, i) { + ;(this.x = t || 0), (this.y = i || 0) + }, + copy: function (t) { + return (this.x = t.x || 0), (this.y = t.y || 0), this + }, + multiply: function (t, i) { + return (this.x *= t || 1), (this.y *= i || 1), this + }, + divide: function (t, i) { + return (this.x /= t || 1), (this.y /= i || 1), this + }, + add: function (t, i) { + return (this.x += t || 0), (this.y += i || 0), this + }, + subtract: function (t, i) { + return (this.x -= t || 0), (this.y -= i || 0), this + }, + clampX: function (t, i) { + return (this.x = Math.max(t, Math.min(this.x, i))), this + }, + clampY: function (t, i) { + return (this.y = Math.max(t, Math.min(this.y, i))), this + }, + flipX: function () { + return (this.x *= -1), this + }, + flipY: function () { + return (this.y *= -1), this + } + } + const h = function (t) { + ;(this._canvas = null), + (this._context = null), + (this._sto = null), + (this._width = 0), + (this._height = 0), + (this._scroll = 0), + (this._ribbons = []), + (this._options = { + colorSaturation: '80%', + colorBrightness: '60%', + colorAlpha: 0.65, + colorCycleSpeed: 6, + verticalPosition: 'center', + horizontalSpeed: 150, + ribbonCount: 5, + strokeSize: 5, + parallaxAmount: -0.5, + animateSections: !0 + }), + (this._onDraw = this._onDraw.bind(this)), + (this._onResize = this._onResize.bind(this)), + (this._onScroll = this._onScroll.bind(this)), + this.setOptions(t), + this.init() + } + return ( + (h.prototype = { + constructor: h, + setOptions: function (t) { + if ('object' == typeof t) + for (const i in t) + t.hasOwnProperty(i) && (this._options[i] = t[i]) + }, + init: function () { + try { + ;(this._canvas = document.createElement('canvas')), + (this._canvas.id = id), + (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'] = '0'), + (this._canvas.style['pointer-events'] = 'none'), + 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 (t) { + return void console.warn('Canvas Context Error: ' + t.toString()) + } + this._onDraw() + }, + addRibbon: function () { + const t = Math.round(o(1, 9)) > 5 ? 'right' : 'left' + let i = 1e3 + const n = 200, + s = 0 - n, + h = this._width + n + let a = 0, + r = 0 + const l = 'right' === t ? s : h + let c = Math.round(o(0, this._height)) + ;/^(top|min)$/i.test(this._options.verticalPosition) + ? (c = 0 + n) + : /^(middle|center)$/i.test(this._options.verticalPosition) + ? (c = this._height / 2) + : /^(bottom|max)$/i.test(this._options.verticalPosition) && + (c = this._height - n) + const p = [], + _ = new e(l, c), + d = new e(l, c) + let u = null, + b = Math.round(o(0, 360)), + f = 0 + for (; !(i <= 0); ) { + if ( + (i--, + (a = Math.round( + (1 * Math.random() - 0.2) * this._options.horizontalSpeed + )), + (r = Math.round( + (1 * Math.random() - 0.5) * (0.25 * this._height) + )), + (u = new e()), + u.copy(d), + 'right' === t) + ) { + if ((u.add(a, r), d.x >= h)) break + } else if ('left' === t && (u.subtract(a, r), d.x <= s)) break + p.push({ + point1: new e(_.x, _.y), + point2: new e(d.x, d.y), + point3: u, + color: b, + delay: f, + dir: t, + alpha: 0, + phase: 0 + }), + _.copy(d), + d.copy(u), + (f += 4), + (b += this._options.colorCycleSpeed) + } + this._ribbons.push(p) + }, + _drawRibbonSection: function (t) { + if (t) { + if (t.phase >= 1 && t.alpha <= 0) return !0 + if (t.delay <= 0) { + if ( + ((t.phase += 0.02), + (t.alpha = 1 * Math.sin(t.phase)), + (t.alpha = t.alpha <= 0 ? 0 : t.alpha), + (t.alpha = t.alpha >= 1 ? 1 : t.alpha), + this._options.animateSections) + ) { + const i = 0.1 * Math.sin(1 + (t.phase * Math.PI) / 2) + 'right' === t.dir + ? (t.point1.add(i, 0), + t.point2.add(i, 0), + t.point3.add(i, 0)) + : (t.point1.subtract(i, 0), + t.point2.subtract(i, 0), + t.point3.subtract(i, 0)), + t.point1.add(0, i), + t.point2.add(0, i), + t.point3.add(0, i) + } + } else t.delay -= 0.5 + const i = this._options.colorSaturation, + n = this._options.colorBrightness, + o = + 'hsla(' + + t.color + + ', ' + + i + + ', ' + + n + + ', ' + + t.alpha + + ' )' + this._context.save(), + 0 !== this._options.parallaxAmount && + this._context.translate( + 0, + this._scroll * this._options.parallaxAmount + ), + this._context.beginPath(), + this._context.moveTo(t.point1.x, t.point1.y), + this._context.lineTo(t.point2.x, t.point2.y), + this._context.lineTo(t.point3.x, t.point3.y), + (this._context.fillStyle = o), + this._context.fill(), + this._options.strokeSize > 0 && + ((this._context.lineWidth = this._options.strokeSize), + (this._context.strokeStyle = o), + (this._context.lineCap = 'round'), + this._context.stroke()), + this._context.restore() + } + return !1 + }, + _onDraw: function () { + for (let t = 0, i = this._ribbons.length; t < i; ++t) + this._ribbons[t] || this._ribbons.splice(t, 1) + this._context.clearRect(0, 0, this._width, this._height) + for (let t = 0; t < this._ribbons.length; ++t) { + const i = this._ribbons[t], + n = i.length + let o = 0 + for (let t = 0; t < n; ++t) this._drawRibbonSection(i[t]) && o++ + o >= n && (this._ribbons[t] = null) + } + this._ribbons.length < this._options.ribbonCount && + this.addRibbon(), + requestAnimationFrame(this._onDraw) + }, + _onResize: function (t) { + const i = s(t) + ;(this._width = i.width), + (this._height = i.height), + this._canvas && + ((this._canvas.width = this._width), + (this._canvas.height = this._height), + this._context && + (this._context.globalAlpha = this._options.colorAlpha)) + }, + _onScroll: function (t) { + const i = s(t) + this._scroll = i.scrolly + } + }), + h + ) + })()) + new Ribbons({ + colorSaturation: '60%', + colorBrightness: '50%', + colorAlpha: 0.5, + colorCycleSpeed: 5, + verticalPosition: 'random', + horizontalSpeed: 200, + ribbonCount: 3, + strokeSize: 0, + parallaxAmount: -0.2, + animateSections: !0 + }) +} + +window.destroyFlutteringRibbon = destroyFlutteringRibbon +window.createFlutteringRibbon = createFlutteringRibbon diff --git a/public/js/nest.js b/public/js/nest.js index 72a861d3..2b151d00 100644 --- a/public/js/nest.js +++ b/public/js/nest.js @@ -5,9 +5,9 @@ * @param config */ -const id = '__next' +const idNest = '__nest' function createNest() { - const e = document.getElementById('__next') + const e = document.getElementById(idNest) if(!e) return function n(e, n, t) { return e.getAttribute(n) || t @@ -108,7 +108,7 @@ function createNest() { } function destroyNest() { - const nest = document.getElementById(id) + const nest = document.getElementById(idNest) if(nest && nest.parentNode){ nest.parentNode.removeChild(nest) } diff --git a/public/js/ribbon.js b/public/js/ribbon.js new file mode 100644 index 00000000..928ccd11 --- /dev/null +++ b/public/js/ribbon.js @@ -0,0 +1,89 @@ +/* eslint-disable */ +/** + * 创建连接点 + * @param config + */ +const idRibbon = 'canvasRibbon' +function createRibbon() { + !(function () { + const t = document.getElementById('__next') + const e = { + z: n(t, 'zIndex', 0), + a: n(t, 'alpha', 0.6), + s: n(t, 'size', 90), + c: t.getAttribute('data-click') + } + function n(t, e, n) { + return Number(t.getAttribute(e)) || n + } + const i = document.createElement('canvas'), + o = i.getContext('2d'), + c = window.devicePixelRatio || 1, + a = window.innerWidth, + l = window.innerHeight, + d = e.s + i.id = id + let r, s + const u = Math + let h = 0 + const g = 2 * u.PI, + f = u.cos, + m = u.random + function x() { + for ( + o.clearRect(0, 0, a, l), + r = [ + { x: 0, y: 0.7 * l + d }, + { x: 0, y: 0.7 * l - d } + ]; + r[1].x < a + d; + + ) + y(r[0], r[1]) + } + function y(t, e) { + o.beginPath(), o.moveTo(t.x, t.y), o.lineTo(e.x, e.y) + const n = e.x + (2 * m() - 0.25) * d, + i = b(e.y) + o.lineTo(n, i), + o.closePath(), + (h -= g / -50), + (o.fillStyle = + '#' + + ( + ((127 * f(h) + 128) << 16) | + ((127 * f(h + g / 3) + 128) << 8) | + (127 * f(h + (g / 3) * 2) + 128) + ).toString(16)), + o.fill(), + (r[0] = r[1]), + (r[1] = { x: n, y: i }) + } + function b(t) { + return (s = t + (2 * m() - 1.1) * d), s > l || s < 0 ? b(t) : s + } + ;(i.width = a * c), + (i.height = l * c), + o.scale(c, c), + (o.globalAlpha = e.a), + (i.style.cssText = + 'opacity: ' + + e.a + + ';position:fixed;top:0;left:0;z-index: ' + + e.z + + ';width:100%;height:100%;pointer-events:none;'), + document.getElementsByTagName('body')[0].appendChild(i), + 'false' !== e.c && ((document.onclick = x), (document.ontouchstart = x)), + x() + })() +} + +function destroyRibbon() { + const ribbon = document.getElementById(idRibbon) + if (ribbon && ribbon.parentNode) { + ribbon.parentNode.removeChild(ribbon) + } +} + +window.createRibbon = createRibbon +window.destroyRibbon = destroyRibbon diff --git a/public/js/sakura.js b/public/js/sakura.js index c6853156..4d246a35 100644 --- a/public/js/sakura.js +++ b/public/js/sakura.js @@ -4,7 +4,7 @@ * 创建樱花雨 * @param config */ -const id = 'canvas_sakura' +const idSakura = 'canvas_sakura' function createSakura() { var stop, staticx var img = new Image() @@ -176,7 +176,7 @@ function createSakura() { // 销毁樱花雨 function destroySakura() { - const sakura = document.getElementById(id) + const sakura = document.getElementById(idSakura) if (sakura && sakura.parentNode) { sakura.parentNode.removeChild(sakura) } diff --git a/public/js/starrySky.js b/public/js/starrySky.js new file mode 100644 index 00000000..b699f0af --- /dev/null +++ b/public/js/starrySky.js @@ -0,0 +1,129 @@ +/* eslint-disable */ +/** + * 创建星空雨 + * @param config + */ +function renderStarrySky() { + let div = document.createElement('div') + div.className = 'relative' + let canvas = document.createElement('canvas') + canvas.id = 'starry-sky-vixcity' + canvas.style.zIndex = 5 + canvas.className = 'top-0 fixed pointer-events-none' + div.appendChild(canvas) + + document.body.appendChild(div) + + window.requestAnimationFrame = + window.requestAnimationFrame || + window.mozRequestAnimationFrame || + window.webkitRequestAnimationFrame || + window.msRequestAnimationFrame + var n, + e, + i, + h, + t = 0.05, + s = document.getElementById('starry-sky-vixcity'), + o = !0, + a = '180,184,240', + r = '226,225,142', + d = '226,225,224', + c = [] + function f() { + ;(n = window.innerWidth), + (e = window.innerHeight), + (i = 0.216 * n), + s.setAttribute('width', n), + s.setAttribute('height', e) + } + function u() { + h.clearRect(0, 0, n, e) + for (var t = c.length, i = 0; i < t; i++) { + var s = c[i] + s.move(), s.fadeIn(), s.fadeOut(), s.draw() + } + } + function y() { + ;(this.reset = function () { + ;(this.giant = m(3)), + (this.comet = !this.giant && !o && m(10)), + (this.x = l(0, n - 10)), + (this.y = l(0, e)), + (this.r = l(1.1, 2.6)), + (this.dx = l(t, 6 * t) + (this.comet + 1 - 1) * t * l(50, 120) + 2 * t), + (this.dy = -l(t, 6 * t) - (this.comet + 1 - 1) * t * l(50, 120)), + (this.fadingOut = null), + (this.fadingIn = !0), + (this.opacity = 0), + (this.opacityTresh = l(0.2, 1 - 0.4 * (this.comet + 1 - 1))), + (this.do = l(5e-4, 0.002) + 0.001 * (this.comet + 1 - 1)) + }), + (this.fadeIn = function () { + this.fadingIn && + ((this.fadingIn = !(this.opacity > this.opacityTresh)), + (this.opacity += this.do)) + }), + (this.fadeOut = function () { + this.fadingOut && + ((this.fadingOut = !(this.opacity < 0)), + (this.opacity -= this.do / 2), + (this.x > n || this.y < 0) && ((this.fadingOut = !1), this.reset())) + }), + (this.draw = function () { + if ((h.beginPath(), this.giant)) + (h.fillStyle = 'rgba(' + a + ',' + this.opacity + ')'), + h.arc(this.x, this.y, 2, 0, 2 * Math.PI, !1) + else if (this.comet) { + ;(h.fillStyle = 'rgba(' + d + ',' + this.opacity + ')'), + h.arc(this.x, this.y, 1.5, 0, 2 * Math.PI, !1) + for (var t = 0; t < 30; t++) + (h.fillStyle = + 'rgba(' + + d + + ',' + + (this.opacity - (this.opacity / 20) * t) + + ')'), + h.rect( + this.x - (this.dx / 4) * t, + this.y - (this.dy / 4) * t - 2, + 2, + 2 + ), + h.fill() + } else + (h.fillStyle = 'rgba(' + r + ',' + this.opacity + ')'), + h.rect(this.x, this.y, this.r, this.r) + h.closePath(), h.fill() + }), + (this.move = function () { + ;(this.x += this.dx), + (this.y += this.dy), + !1 === this.fadingOut && this.reset(), + (this.x > n - n / 4 || this.y < 0) && (this.fadingOut = !0) + }), + setTimeout(function () { + o = !1 + }, 50) + } + function m(t) { + return Math.floor(1e3 * Math.random()) + 1 < 10 * t + } + function l(t, i) { + return Math.random() * (i - t) + t + } + f(), + window.addEventListener('resize', f, !1), + (function () { + h = s.getContext('2d') + for (var t = 0; t < i; t++) (c[t] = new y()), c[t].reset() + u() + })(), + (function t() { + document.getElementsByTagName('html')[0].className.indexOf('dark') >= 0 && + u(), + window.requestAnimationFrame(t) + })() +} + +window.renderStarrySky = renderStarrySky \ No newline at end of file