dom-confetti - npm Package Compare versions

Comparing version 0.2.0-beta.5 to 0.2.0

index.d.ts

 interface ConfettiConfig {
     angle?: number;
     spread?: number;
-    width?: number;
-    height?: number;
+    width?: string;
+    height?: string;
+    perspective?: string;
     duration?: number;
@@ -7,0 +8,0 @@ dragFriction?: number;

lib/main.js

@@ -30,2 +30,3 @@ "use strict";
     y: 0,
+    z: 0,
     wobble: random() * 10,
@@ -59,2 +60,3 @@ wobbleSpeed: 0.1 + random() * 0.1,
       y = _fetti$physics.y,
+      z = _fetti$physics.z,
       tiltAngle = _fetti$physics.tiltAngle,
@@ -65,3 +67,3 @@ wobble = _fetti$physics.wobble;
   var wobbleY = y + 10 * Math.sin(wobble);
-  var transform = "translate3d(" + wobbleX + "px, " + wobbleY + "px, 0) rotate3d(1, 1, 1, " + tiltAngle + "rad)";
+  var transform = "translate3d(" + wobbleX + "px, " + wobbleY + "px, " + z + "px) rotate3d(1, 1, 1, " + tiltAngle + "rad)";
 
@@ -110,2 +112,3 @@ fetti.element.style.visibility = "visible";
   height: "10px",
+  perspective: "300px",
   colors: defaultColors,
@@ -133,2 +136,3 @@ duration: 3000,
       height = _Object$assign.height,
+      perspective = _Object$assign.perspective,
       angle = _Object$assign.angle,
@@ -143,2 +147,3 @@ spread = _Object$assign.spread,
 
+  root.style.perspective = perspective;
   var elements = createElements(root, elementCount, colors, width, height);
@@ -145,0 +150,0 @@ var fettis = elements.map(function (element) {

package.json

 {
   "name": "dom-confetti",
-  "version": "0.2.0-beta.5",
+  "version": "0.2.0",
   "description": "confetti with dom elements",
@@ -5,0 +5,0 @@ "main": "lib/main.js",

README.md

@@ -30,3 +30,5 @@ # dom-confetti
 - `startVelocity` - Initial velocity of the particles, defaults to 45.
-- `width`: - width of the confetti elements
+- `width`: - width of the confetti elements as css string, defaults to `10px`.
+- `height`: - height of the confetti elements as css string, defaults to `10px`.
+- `perspective` - perspective of root element, default to `300px`.
 - `height`: - height of the confetti elements
@@ -43,2 +45,2 @@ - `elementCount` - Number of particle elements, defaults to 50.
 
-License MIT, copyright [Daniel Lundin](https://www.twitter.com/daniel-lundin) 2019
+License MIT, copyright [Daniel Lundin](https://twitter.com/danielundin) 2019

src/main.js

@@ -24,2 +24,3 @@ const defaultColors = ["#a864fd", "#29cdff", "#78ff44", "#ff718d", "#fdff6a"];
     y: 0,
+    z: 0,
     wobble: random() * 10,
@@ -50,6 +51,6 @@ wobbleSpeed: 0.1 + random() * 0.1,
 
-  const { x, y, tiltAngle, wobble } = fetti.physics;
+  const { x, y, z, tiltAngle, wobble } = fetti.physics;
   const wobbleX = x + 10 * Math.cos(wobble);
   const wobbleY = y + 10 * Math.sin(wobble);
-  const transform = `translate3d(${wobbleX}px, ${wobbleY}px, 0) rotate3d(1, 1, 1, ${tiltAngle}rad)`;
+  const transform = `translate3d(${wobbleX}px, ${wobbleY}px, ${z}px) rotate3d(1, 1, 1, ${tiltAngle}rad)`;
 
@@ -98,2 +99,3 @@ fetti.element.style.visibility = "visible";
   height: "10px",
+  perspective: "300px",
   colors: defaultColors,
@@ -119,2 +121,3 @@ duration: 3000,
     height,
+    perspective,
     angle,
@@ -129,2 +132,3 @@ spread,
   } = Object.assign({}, defaults, backwardPatch(config));
+  root.style.perspective = perspective;
   const elements = createElements(root, elementCount, colors, width, height);
@@ -131,0 +135,0 @@ const fettis = elements.map(element => ({

No alert changes

Improved metrics

Total package byte prevSize

12252

increased by3.86%

Lines of code

289

increased by3.58%

Number of lines in readme file

45

increased by4.65%

No dependency changes