🎨 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() * 360 + 'deg', // Orientation
-                Math.random(),
+                Math.random(), // Scale
-                0.5 + Math.random() * 1.5 + 's'
+                0.5 + Math.random() * 1.5 + 's' // Duration
             ])
         }
 
@@ -28,15 +34,15 @@ export default
             this.$emit('end', this.index)
         }, 4000)
 
-        // Color
+        // Random color
-        this.color = `hsl(${255 * Math.random()}, 100%, 50%)`
+        if(this.color === 'random')
-    },
+        {
-
+            this.cssColor = `hsl(${255 * Math.random()}, 100%, 50%)`
-    mounted()
+        }
-    {
+        // Specific color
-    },
+        else
-
+        {
-    methods:
+            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>

site/src/components/fireworks/script.js

@@ -11,7 +11,11 @@ export default
 
     props:
     {
-        running: { type: Boolean, default: true }
+        running: { type: Boolean, default: true },
+        minimumFrequency: { type: Number, default: 0.5 },
+        randomFrequency: { type: Number, default: 2.5 },
+        color: { type: String, default: 'random' },
+        sparksCount: { type: Number, default: 30 }
     },
 
     data()
@@ -33,7 +37,11 @@ export default
 
     mounted()
     {
-        this.start()
+        // If running add first blast
+        if(this.running)
+        {
+            this.addBlast()
+        }
     },
 
     methods:
@@ -46,40 +54,34 @@ export default
             }
         },
 
-        start()
-        {
-            if(this.running)
-            {
-                this.addBlast()
-            }
-        },
-
         addBlast()
         {
+            // Add blast to array
             this.blasts.push(this.blastsIndex++)
 
+            // If still running wait and add another blast
             if(this.running)
             {
+                const duration = (this.minimumFrequency * 1000) + Math.random() * (this.randomFrequency * 1000)
                 window.setTimeout(() =>
                 {
-                    this.addBlast()
+                    if(this.running)
-                }, 1000 + Math.random() * 3000)
+                    {
+                        this.addBlast()
+                    }
+                }, duration)
             }
         },
 
-        removeBlast(index)
+        onBlastEnd(index)
         {
+            // Find blast index and remove properly from array
             const blast = this.blasts.indexOf(index)
 
             if(blast !== -1)
             {
                 this.blasts.splice(blast, 1)
             }
-        },
-
-        onBlastEnd(index)
-        {
-            this.removeBlast(index)
         }
     }
 }

site/src/components/fireworks/template.html

@@ -1,3 +1,3 @@
 <div class="fireworks">
-    <blast v-for="blast in blasts" :key="blast" @end="onBlastEnd(blast)"></blast>
+    <blast v-for="blast in blasts" :key="blast" :color="color" :sparks-count="sparksCount" @end="onBlastEnd(blast)"></blast>
 </div>

site/src/components/landing/style.styl

@@ -121,6 +121,7 @@
     z-index 2
     transform translateX(0) translateY(0) scale(1, 1)
     transition transform 0.3s
+    will-change transform
 
     .focus &
         transform  translateX(-145px) translateY(250px) scale(3, 3)