#38 - bursting bubbles

src/layout/bubbles.svelte

@@ -1,20 +1,27 @@
 <div class="circles" data-cy="bubbles">
-    {#each bubbles as bubble}
-        <div style="{ getStyle(bubble) }"></div>
+    {#each bubbles as bubble, index}
+        <div class="bubble"
+             on:click={ (event) => pop(event, index) }
+             style="{ getStyle(bubble) }"
+             class:popping="{ bubbles[index].popping }"
+             on:animationiteration={ bubbles[index].popping = false }
+        >
+            <div class="inner"></div>
+        </div>
     {/each}
 </div>
 
 <script>
   const bubbles = [
-    { left: 20, size: 32, delay: 1, duration: 6 },
-    { left: 25, size: 40, delay: 0, duration: 7 },
-    { left: 36, size: 36, delay: 2, duration: 5 },
-    { left: 5, size: 64, delay: 0, duration: 10 },
-    { left: 56, size: 72, delay: 0, duration: 5 },
-    { left: 70, size: 144, delay: 3, duration: 7 },
-    { left: 72, size: 36, delay: 7, duration: 5 },
-    { left: 75, size: 24, delay: 6, duration: 6 },
-    { left: 92, size: 108, delay: 0, duration: 8 }
+    { left: 20, size: 32, delay: 1, duration: 6, popping: false },
+    { left: 25, size: 40, delay: 0, duration: 7, popping: false },
+    { left: 36, size: 36, delay: 2, duration: 5, popping: false },
+    { left: 5, size: 64, delay: 0, duration: 10, popping: false },
+    { left: 56, size: 72, delay: 0, duration: 5, popping: false },
+    { left: 70, size: 144, delay: 3, duration: 7, popping: false },
+    { left: 72, size: 36, delay: 7, duration: 5, popping: false },
+    { left: 75, size: 24, delay: 6, duration: 6, popping: false },
+    { left: 92, size: 108, delay: 0, duration: 8, popping: false }
   ]
 
   function getStyle (bubble) {
@@ -31,29 +38,52 @@
 
     return styles.join(';')
   }
+
+  function pop (event, index) {
+    if (!bubbles[index].popping) {
+      bubbles[index].popping = true
+    }
+  }
 </script>
 
 <style>
+    .bubble.popping .inner {
+        animation-name: pop;
+        animation-duration: 500ms;
+        animation-iteration-count: 1;
+        animation-fill-mode: forwards;
+        animation-timing-function: cubic-bezier(.19, 1, .22, 1);
+    }
+
     .circles {
-        position: fixed;
-        top: 0;
+        bottom: 0;
         left: 0;
         width: 100%;
-        height: 100%;
         overflow: hidden;
-        z-index: -1;
+        mix-blend-mode: multiply;
     }
 
-    .circles div {
-        position: absolute;
-        background: #4299e1;
-        opacity: .15;
-        animation: animate linear infinite;
+    .bubble {
+        position: fixed;
+        animation: raise linear infinite;
         bottom: -150px;
+    }
+
+    .inner {
+        top: 0;
+        left: 0;
         border-radius: 100%;
+        background: #4299e1;
+        width: 100%;
+        height: 100%;
+        transition-duration: 300ms;
+    }
+
+    .bubble:hover .inner {
+        background: #1066ad;
     }
 
-    @keyframes animate {
+    @keyframes raise {
         0% {
             transform: translateY(0);
             opacity: .75;
@@ -64,4 +94,11 @@
             opacity: 0;
         }
     }
-</style>
+
+    @keyframes pop {
+        100% {
+            transform: scale(1.5);
+            opacity: 0;
+        }
+    }
+</style>

src/sections/gdpr.svelte

@@ -1,4 +1,4 @@
-<div class="container mx-auto opacity-50 px-16 pt-12 text-sm text-center md:text-left">
+<div class="container mx-auto text-gray-400 px-16 pt-12 text-sm text-center md:text-left">
     { $_('pages.career.gdpr') }
 </div>