1
0
mirror of https://github.com/StarGazer114/stargazer114.github.io.git synced 2025-01-09 23:08:16 +08:00
stargazer114.github.io/pluginsSrc/butterfly-extsrc/dist/canvas-fluttering-ribbon.min.js

1 line
2.8 KiB
JavaScript
Raw Normal View History

2025-01-05 20:41:38 +08:00
"object"==typeof window&&(window.Ribbons=(()=>{const t=(t,o)=>Math.random()*(o-t)+t,o=()=>({width:window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0,height:window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0,scrollY:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0}),e=(t,o)=>({x:t,y:o}),i=(o,i,n)=>{const l=[],a=Math.random()>.5?"right":"left",r="right"===a?-200:i+200,s="random"===o.verticalPosition?t(0,n):"top"===o.verticalPosition?200:"bottom"===o.verticalPosition?n-200:n/2;let c=e(r,s),d=e(r,s);for(let r=0;r<1e3;r++){const s=t(-.2,1)*o.horizontalSpeed,h=t(-.5,.5)*(.25*n),p=e(d.x+("right"===a?s:-s),d.y+h);if("right"===a&&d.x>=i+200||"left"===a&&d.x<=-200)break;l.push({point1:{...c},point2:{...d},point3:p,color:r*o.colorCycleSpeed,delay:4*r,dir:a,alpha:0,phase:0}),c={...d},d={...p}}return l},n=(t,o,e,i)=>{if(o.phase>=1&&o.alpha<=0)return!0;if(o.delay<=0){if(o.phase+=.02,o.alpha=Math.sin(o.phase),o.alpha=Math.max(0,Math.min(o.alpha,1)),e.animateSections){const t=.1*Math.sin(1+o.phase*Math.PI/2),e="right"===o.dir?t:-t;o.point1.x+=e,o.point2.x+=e,o.point3.x+=e,o.point1.y+=t,o.point2.y+=t,o.point3.y+=t}}else o.delay-=.5;const n=`hsla(${o.color}, ${e.colorSaturation}, ${e.colorBrightness}, ${o.alpha*e.colorAlpha})`;return t.save(),0!==e.parallaxAmount&&t.translate(0,i*e.parallaxAmount),t.beginPath(),t.moveTo(o.point1.x,o.point1.y),t.lineTo(o.point2.x,o.point2.y),t.lineTo(o.point3.x,o.point3.y),t.fillStyle=n,t.fill(),e.strokeSize>0&&(t.lineWidth=e.strokeSize,t.strokeStyle=n,t.lineCap="round",t.stroke()),t.restore(),!1};return(t={})=>{const e={colorSaturation:"80%",colorBrightness:"60%",colorAlpha:.65,colorCycleSpeed:6,verticalPosition:"center",horizontalSpeed:150,ribbonCount:3,strokeSize:0,parallaxAmount:-.5,animateSections:!0,...t};let l,a,r,s,c;const d=[],h=()=>{({width:r,height:s}=o()),l.width=r,l.height=s,a.globalAlpha=e.colorAlpha},p=()=>{({scrollY:c}=o())},m=()=>{a.clearRect(0,0,r,s),d.forEach(((t,o)=>{t=t.filter((t=>!n(a,t,e,c))),d[o]=t.length?t:null})),d.forEach(((t,o)=>{t||(d[o]=i(e,r,s))})),requestAnimationFrame(m)};(()=>{l=document.createElement("canvas"),a=l.getContext("2d"),l.style.cssText="display:block;position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;",document.body.appendChild(l),h();for(let t=0;t<e.ribbonCount;t++)d.push(i(e,r,s));window.addEventListener("resize",h),window.addEventListener("scroll",p),m()})()}})());const ribbonContainer=document.getElementById("fluttering_ribbon"),isMobileDisabled="false"===ribbonContainer.getAttribute("mobile");isMobileDisabled&&/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)||Ribbons({colorSaturation:"60%",colorBrightness:"50%",colorAlpha:.5,colorCycleSpeed:5,verticalPosition:"random",horizontalSpeed:200,ribbonCount:3,strokeSize:0,parallaxAmount:-.2,animateSections:!0});