diff --git a/site/src/components/blast/script.js b/site/src/components/blast/script.js
index aab7a01..0668c87 100644
--- a/site/src/components/blast/script.js
+++ b/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
+ }
}
}
\ No newline at end of file
diff --git a/site/src/components/blast/style.styl b/site/src/components/blast/style.styl
index aa0b6ee..51b3a33 100644
--- a/site/src/components/blast/style.styl
+++ b/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
\ No newline at end of file
+ height 30px
+ will-change transform
\ No newline at end of file
diff --git a/site/src/components/blast/template.html b/site/src/components/blast/template.html
index 2b57fbb..a749ada 100644
--- a/site/src/components/blast/template.html
+++ b/site/src/components/blast/template.html
@@ -1,7 +1,7 @@
\ No newline at end of file
diff --git a/site/src/components/fireworks/script.js b/site/src/components/fireworks/script.js
index 1b43c09..1d88cb6 100644
--- a/site/src/components/fireworks/script.js
+++ b/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()
- }, 1000 + Math.random() * 3000)
+ if(this.running)
+ {
+ 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)
}
}
}
\ No newline at end of file
diff --git a/site/src/components/fireworks/template.html b/site/src/components/fireworks/template.html
index ffef58a..8ad7da9 100644
--- a/site/src/components/fireworks/template.html
+++ b/site/src/components/fireworks/template.html
@@ -1,3 +1,3 @@
-
+
\ No newline at end of file
diff --git a/site/src/components/landing/style.styl b/site/src/components/landing/style.styl
index ff49837..d410665 100644
--- a/site/src/components/landing/style.styl
+++ b/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)