Add hidden effect 2

diff --git a/index.html b/index.html
index 8375734ecce921443f236ddd2acd804b789af491..c9eadf16bcfd3aa26c607e1a623df31c58ad9298 100644 (file)
--- a/index.html
+++ b/index.html
@@ -57,14 +57,13 @@
       font-family: monospace;
       font-size: clamp(1rem, 2.5dvi, 2rem);
       position: relative;
+      transition: translate 200ms, filter 200ms;
     }
 
-    #ascii-container button {
+    #ascii-container .effect {
       font-family: inherit;
       font-size: inherit;
       position: absolute;
-      left: 17.5ch;
-      bottom: 0;
       inline-size: 2ch;
       block-size: 2ch;
       border: none;
@@ -85,6 +84,16 @@
         border-radius: 2ch;
         animation: flicker 1s linear infinite alternate;
       }
+
+      &.color {
+        left: 17.5ch;
+        bottom: 0;
+      }
+
+      &.character {
+        left: 19.5ch;
+        top: 2.3ch;
+      }
     }
 
     @keyframes flicker {
@@ -160,7 +169,8 @@
       const currentFrame = Math.floor((timestamp - start) / msPerFrame);
       if (currentFrame >= frames.length) {
         asciiContainer.textContent = ascii;
-        asciiContainer.insertAdjacentElement('beforeend', button)
+        asciiContainer.insertAdjacentElement('beforeend', colorEffect);
+        asciiContainer.insertAdjacentElement('beforeend', translateEffect);
         return;
       }
       asciiContainer.textContent = frames[currentFrame];
@@ -174,10 +184,11 @@
     }
 
     // Add hidden effect
-    const button = document.createElement('button');
+    const colorEffect = document.createElement('button');
+    colorEffect.classList.add('effect', 'color');
     const highlightStyle = document.createElement('style');
     document.head.appendChild(highlightStyle);
-    button.addEventListener('click', e => {
+    colorEffect.addEventListener('click', e => {
       e.target.textContent = '!';
 
       if (CSS.highlights !== undefined) {
@@ -197,6 +208,18 @@
       }
     });
 
+    // Add hidden effect 2
+    const translateEffect = document.createElement('button');
+    translateEffect.classList.add('effect', 'character');
+    translateEffect.addEventListener('click', e => {
+      e.target.textContent = '!';
+
+      const xOffset = Math.floor(Math.random() * 5 + 5) * (Math.random() < 0.5 ? 1 : -1);
+      const yOffset = Math.floor(Math.random() * 5 + 5) * (Math.random() < 0.5 ? 1 : -1);
+      asciiContainer.style.setProperty('translate', `${xOffset}px ${yOffset}px`);
+      asciiContainer.style.setProperty('filter', `drop-shadow(${xOffset * -1}px ${yOffset * -1}px 4px hsl(216deg 50% 50%))`);
+    });
+
     // Inject obfuscated email. To block low-effort scraping.
     const addr = document.querySelector('address > a');
     addr.href = atob('bWFpbHRvOmFyZGlzQGFyZGlzbHUuZGV2');