mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-13 23:16:47 +00:00
提炼 静/动态彩带特效、星空雨特效 到public，优化 线段粒子特效和樱花特效 在public中的代码
特效已经全部封装到public当中
This commit is contained in:
Vixcity
@@ -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
|
||||
})
|
||||
}
|
||||
|
||||
@@ -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()
|
||||
})()
|
||||
}
|
||||
|
||||
@@ -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 (
|
||||
<div className="relative">
|
||||
<canvas id="starry-sky-vixcity" style={{zIndex:5}} className="top-0 fixed pointer-events-none"></canvas>
|
||||
</div>
|
||||
<></>
|
||||
)
|
||||
}
|
||||
|
||||
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)
|
||||
})()
|
||||
}
|
||||
|
||||
313
public/js/flutteringRibbon.js
Normal file
313
public/js/flutteringRibbon.js
Normal file
@@ -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
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
89
public/js/ribbon.js
Normal file
89
public/js/ribbon.js
Normal file
@@ -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
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
129
public/js/starrySky.js
Normal file
129
public/js/starrySky.js
Normal file
@@ -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
|
||||
Reference in New Issue
Block a user