From: Ardis Lu <ardisglu@gmail.com>
Date: Fri, 6 Jun 2025 06:21:52 +0000 (-0700)
Subject: Add random 0 to 5s animation delay
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=0cf7d75353946e67e6c5cc1f30fcab197c9c39fb;p=ard.is

Add random 0 to 5s animation delay

It is better aesthetically if each effect flickers out of sync, to show their independence.
---

diff --git a/index.html b/index.html
index d59fad9..afee7de 100644
--- a/index.html
+++ b/index.html
@@ -82,7 +82,7 @@
         inline-size: 100%;
         block-size: 100%;
         border-radius: 2ch;
-        animation: flicker 1s linear infinite alternate;
+        animation: flicker 1s linear var(--delay) infinite alternate;
       }
 
       &.color {
@@ -186,6 +186,7 @@
     // Add hidden effect
     const colorEffect = document.createElement('button');
     colorEffect.classList.add('effect', 'color');
+    colorEffect.style.setProperty('--delay', `${Math.floor(Math.random() * 5000)}ms`);
     const highlightStyle = document.createElement('style');
     document.head.appendChild(highlightStyle);
     colorEffect.addEventListener('click', e => {
@@ -211,6 +212,7 @@
     // Add hidden effect 2
     const translateEffect = document.createElement('button');
     translateEffect.classList.add('effect', 'translate');
+    translateEffect.style.setProperty('--delay', `${Math.floor(Math.random() * 5000)}ms`);
     translateEffect.addEventListener('click', e => {
       e.target.textContent = '!';