effect-snow - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/snow.esm.js

@@ -43,2 +43,4 @@ // ../commons/utils.js
     }
+    const container = document.createElement("div");
+    container.style.cssText = "position: relative; top: 0; left: 0;";
     const canvas = document.createElement("canvas");
@@ -48,3 +50,4 @@ canvas.setAttribute("width", node.clientWidth);
     canvas.style.cssText = "position: absolute; top: 0; left: 0; pointer-events: none; background: transparent;";
-    node.prepend(canvas);
+    container.append(canvas);
+    node.prepend(container);
     this.ctx = canvas.getContext("2d");
@@ -51,0 +54,0 @@ this.width = canvas.getBoundingClientRect().width;

dist/snow.min.js

@@ -1,2 +0,2 @@
-var Snow=(()=>{var c=Object.defineProperty,w=e=>c(e,"__esModule",{value:!0}),b=(e,t)=>{w(e);for(var s in t)c(e,s,{get:t[s],enumerable:!0})},x={};b(x,{default:()=>f});var n=e=>Math.random()*Math.floor(e),a=(e,t)=>n(t-e)+e,d=class{constructor(t,s,o=375){this.canvasHeight=s,this.offsetX=a(0,t-o),this.posXForAxisY=o/2,this.posX=0,this.posY=a(-50,0),this.initialAngle=n(2*Math.PI),this.size=a(1,3),this.radius=Math.sqrt(n(Math.pow(this.posXForAxisY,2)))}display(t){t.beginPath(),t.arc(this.posX,this.posY,this.size,0,2*Math.PI),t.fill()}update(t){let s=.6,o=s*t+this.initialAngle;return this.posX=this.offsetX+this.posXForAxisY+this.radius*Math.sin(o),this.posY+=Math.pow(this.size,.5),this.posY>this.canvasHeight?this:null}},g=d,u=class{constructor(t,{intensity:s=3,span:o=375}={}){s>5?s=5:s<1&&(s=1);let i=document.createElement("canvas");i.setAttribute("width",t.clientWidth),i.setAttribute("height",t.clientHeight),i.style.cssText="position: absolute; top: 0; left: 0; pointer-events: none; background: transparent;",t.prepend(i),this.ctx=i.getContext("2d"),this.width=i.getBoundingClientRect().width,this.height=i.getBoundingClientRect().height,this.stopped=!0,this.intensity=s,this.span=o;let l=new ResizeObserver(h=>{for(let r of h)r.target===t&&(i.setAttribute("width",r.target.clientWidth),i.setAttribute("height",r.target.clientHeight),this.width=i.getBoundingClientRect().width,this.height=i.getBoundingClientRect().height)});l.observe(t)}paintBackground(){this.ctx.fillStyle="black",this.ctx.globalCompositeOperation="destination-out",this.ctx.fillRect(0,0,this.width,this.height),this.ctx.globalCompositeOperation="source-over"}start(){if(!this.stopped)return;this.stopped=!1;let t=[],s=performance.now();requestAnimationFrame(function o(i){this.paintBackground(),this.ctx.fillStyle="rgb(240, 240, 240)";let l=n(this.intensity*this.width/this.span);for(let h=0;!this.stopped&&h<l;h++)t.push(new g(this.width,this.height,this.span));for(let h of t){let r=(i-s)/1e3,p=h.update(r);if(p){let m=t.indexOf(p);t.splice(m,1)}h.display(this.ctx)}if(this.stopped&&t.length===0)return;requestAnimationFrame(o.bind(this))}.bind(this))}stop(){this.stopped=!0}},f=u;return x;})();
+var Snow=(()=>{var c=Object.defineProperty,w=e=>c(e,"__esModule",{value:!0}),x=(e,t)=>{w(e);for(var s in t)c(e,s,{get:t[s],enumerable:!0})},b={};x(b,{default:()=>f});var r=e=>Math.random()*Math.floor(e),l=(e,t)=>r(t-e)+e,d=class{constructor(t,s,o=375){this.canvasHeight=s,this.offsetX=l(0,t-o),this.posXForAxisY=o/2,this.posX=0,this.posY=l(-50,0),this.initialAngle=r(2*Math.PI),this.size=l(1,3),this.radius=Math.sqrt(r(Math.pow(this.posXForAxisY,2)))}display(t){t.beginPath(),t.arc(this.posX,this.posY,this.size,0,2*Math.PI),t.fill()}update(t){let s=.6,o=s*t+this.initialAngle;return this.posX=this.offsetX+this.posXForAxisY+this.radius*Math.sin(o),this.posY+=Math.pow(this.size,.5),this.posY>this.canvasHeight?this:null}},u=d,g=class{constructor(t,{intensity:s=3,span:o=375}={}){s>5?s=5:s<1&&(s=1);let a=document.createElement("div");a.style.cssText="position: relative; top: 0; left: 0;";let i=document.createElement("canvas");i.setAttribute("width",t.clientWidth),i.setAttribute("height",t.clientHeight),i.style.cssText="position: absolute; top: 0; left: 0; pointer-events: none; background: transparent;",a.append(i),t.prepend(a),this.ctx=i.getContext("2d"),this.width=i.getBoundingClientRect().width,this.height=i.getBoundingClientRect().height,this.stopped=!0,this.intensity=s,this.span=o;let n=new ResizeObserver(p=>{for(let h of p)h.target===t&&(i.setAttribute("width",h.target.clientWidth),i.setAttribute("height",h.target.clientHeight),this.width=i.getBoundingClientRect().width,this.height=i.getBoundingClientRect().height)});n.observe(t)}paintBackground(){this.ctx.fillStyle="black",this.ctx.globalCompositeOperation="destination-out",this.ctx.fillRect(0,0,this.width,this.height),this.ctx.globalCompositeOperation="source-over"}start(){if(!this.stopped)return;this.stopped=!1;let t=[],s=performance.now();requestAnimationFrame(function o(a){this.paintBackground(),this.ctx.fillStyle="rgb(240, 240, 240)";let i=r(this.intensity*this.width/this.span);for(let n=0;!this.stopped&&n<i;n++)t.push(new u(this.width,this.height,this.span));for(let n of t){let p=(a-s)/1e3,h=n.update(p);if(h){let m=t.indexOf(h);t.splice(m,1)}n.display(this.ctx)}if(this.stopped&&t.length===0)return;requestAnimationFrame(o.bind(this))}.bind(this))}stop(){this.stopped=!0}},f=g;return b;})();
 window.Snow=Snow.default;

package.json

 {
   "name": "effect-snow",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "A scene of snow as background",
@@ -5,0 +5,0 @@ "main": "dist/snow.min.js",

README.md

@@ -0,0 +0,0 @@ # effect-snow

No alert changes

Improved metrics

Total package byte prevSize

15434

increased by0.54%

Lines of code

120

increased by2.56%

No dependency changes