🎨 Site > Fireworks > Improve structure and parameters

site/src/components/blast/script.js

@@ -6,19 +6,25 @@ export default
     {
         return {
             sparks: [],
-            color: 'yellow'
+            cssColor: 'yellow'
         }
     },
 
+    props:
+    {
+        color: { type: String, default: 'random' },
+        sparksCount: { type: Number, default: 25 }
+    },
+
     created()
     {
         // Create sparks
-        for(let i = 0; i < 25; i++)
+        for(let i = 0; i < this.sparksCount; i++)
         {
             this.sparks.push([
-                Math.random() * 360 + 'deg',
-                Math.random(),
-                0.5 + Math.random() * 1.5 + 's'
+                Math.random() * 360 + 'deg', // Orientation
+                Math.random(), // Scale
+                0.5 + Math.random() * 1.5 + 's' // Duration
             ])
         }
 
@@ -28,15 +34,15 @@ export default
             this.$emit('end', this.index)
         }, 4000)
 
-        // Color
-        this.color = `hsl(${255 * Math.random()}, 100%, 50%)`
-    },
-
-    mounted()
-    {
-    },
-
-    methods:
-    {
+        // Random color
+        if(this.color === 'random')
+        {
+            this.cssColor = `hsl(${255 * Math.random()}, 100%, 50%)`
+        }
+        // Specific color
+        else
+        {
+            this.cssColor = this.color
+        }
     }
 }

site/src/components/blast/style.styl

@@ -1,7 +1,7 @@
 .blast
     position absolute
     transform translateY(0px)
-    will-change transform
+    will-change transform, opacity
     animation-name blast
     animation-duration 3s
     animation-timing-function ease-in-out
@@ -20,6 +20,7 @@
 
 .spark
     position absolute
+    will-change transform
 
 .inner-1
     position absolute
@@ -40,4 +41,5 @@
     top -3px
     left -3px
     width 30px
-    height 30px
+    height 30px
+    will-change transform

site/src/components/blast/template.html

@@ -1,7 +1,7 @@
 <div class="blast" :style="`left:${Math.random() * 100}%;top:${Math.random() * 100}%;`">
     <div v-for="spark of sparks" class="spark" :style="`transform: rotate(${spark[0]}) scale(${spark[1]}, ${spark[1]});`">
         <div class="inner-1" :style="`animation-duration: ${spark[2]}`">
-            <div class="inner-2" :style="`transform: scale(${1 - spark[1]}, ${1 - spark[1]}); background-color: ${color};`"></div>
+            <div class="inner-2" :style="`transform: scale(${1 - spark[1]}, ${1 - spark[1]}); background-color: ${cssColor};`"></div>
         </div>
     </div>
 </div>