✨ Site > Add fireworks git add --all! :boom::star2::rocket:🔥💥

2017-09-07 23:42:25 +02:00
parent 1c7b076641
commit c3f122ac43
11 changed files with 306 additions and 8 deletions
@@ -0,0 +1,3 @@
+<template src="./template.html"></template>
+<script src="./script.js"></script>
+<style src="./style.styl" lang="stylus" scoped></style>
@@ -0,0 +1,42 @@
+export default
+{
+    name: 'blast',
+
+    data()
+    {
+        return {
+            sparks: [],
+            color: 'yellow'
+        }
+    },
+
+    created()
+    {
+        // Create sparks
+        for(let i = 0; i < 25; i++)
+        {
+            this.sparks.push([
+                Math.random() * 360 + 'deg',
+                Math.random(),
+                0.5 + Math.random() * 1.5 + 's'
+            ])
+        }
+
+        // End timeout
+        window.setTimeout(() =>
+        {
+            this.$emit('end', this.index)
+        }, 4000)
+
+        // Color
+        this.color = `hsl(${255 * Math.random()}, 100%, 50%)`
+    },
+
+    mounted()
+    {
+    },
+
+    methods:
+    {
+    }
+}
@@ -0,0 +1,43 @@
+.blast
+    position absolute
+    transform translateY(0px)
+    will-change transform
+    animation-name blast
+    animation-duration 3s
+    animation-timing-function ease-in-out
+    animation-fill-mode forwards
+
+    @keyframes blast
+        0%
+            opacity 1
+            transform translateY(0px)
+        50%
+            opacity 1
+        100%
+            opacity 0
+            transform translateY(80px)
+
+
+.spark
+    position absolute
+
+.inner-1
+    position absolute
+    transform translateY(0px)
+    will-change transform
+    animation-name spark-inner-1
+    animation-timing-function cubic-bezier(0, 0, 0, 1)
+    animation-fill-mode forwards
+
+    @keyframes spark-inner-1
+        0%
+            transform translateY(0px)
+        100%
+            transform translateY(160px)
+
+.inner-2
+    position absolute
+    top -3px
+    left -3px
+    width 30px
+    height 30px
@@ -0,0 +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>
+    </div>
+</div>