feat: rework distractions page

theodo · Sep 19, 2023 · 3492c98 · 3492c98
1 parent 1b37e3b
commit 3492c98
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 22 deletions.
diff --git a/public/images/burger.png b/public/images/burger.png
diff --git a/src/simulators/distractions.ts b/src/simulators/distractions.ts
@@ -37,9 +37,9 @@ export const TIMEOUTS = {
 const h2 = "h2";
 const p = "p";
 const img = "img";
+const button = "button";
 
 //dom elements to be created
-const imgEl_0 = ".wds-img-element";
 const textEl_0 = ".wds-text-element-0";
 const textEl_1 = ".wds-text-element-1";
 const textEl_2 = ".wds-text-element-2";
@@ -48,8 +48,8 @@ const textEl_4 = ".wds-text-element-4";
 
 //classes for css animations
 const paragraphAnimation = "wds-paragraph-animation";
+const buttonAnimation = "wds-button-animation";
 const headingAnimation = "wds-heading-animation";
-const imgAnimation_0 = "wds-img-animation-0";
 const imgAnimation_1 = "wds-img-animation-1";
 const textAnimation_0 = "wds-text-animation-0";
 const textAnimation_1 = "wds-text-animation-1";
@@ -107,44 +107,43 @@ const scriptImportedFromExternalRepository = () => {
   function launchAnimations() {
     TIMEOUTS.setTimeout(() => {
       addClass(p, paragraphAnimation);
-      addClass(imgEl_0, imgAnimation_0);
+      addClass(textEl_0, textAnimation_0);
       addClass(img, imgAnimation_1);
-      addClass(h2, headingAnimation);
-    }, 500);
+    }, 100);
 
     TIMEOUTS.setTimeout(() => {
-      removeClass(imgEl_0, imgAnimation_0);
-      addClass(textEl_0, textAnimation_0);
-    }, 5000);
+      addClass(h2, headingAnimation);
+      addClass(button, buttonAnimation);
+    }, 400);
 
     TIMEOUTS.setTimeout(() => {
       removeClass(textEl_0, textAnimation_0);
       addClass(textEl_1, textAnimation_1);
-    }, 12000);
+    }, 5000);
 
     TIMEOUTS.setTimeout(() => {
       removeClass(textEl_1, textAnimation_1);
       addClass(textEl_2, textAnimation_2);
-    }, 20000);
+    }, 13000);
 
     TIMEOUTS.setTimeout(() => {
       removeClass(textEl_2, textAnimation_2);
       addClass(textEl_3, textAnimation_3);
-    }, 26000);
+    }, 19000);
 
     TIMEOUTS.setTimeout(() => {
       removeClass(textEl_3, textAnimation_3);
       addClass(textEl_4, textAnimation_4);
-    }, 32000);
+    }, 25000);
 
     TIMEOUTS.setTimeout(() => {
       removeClass(textEl_4, textAnimation_4);
       TIMEOUTS.clearAllTimeouts();
-    }, 36000);
+    }, 29000);
   }
 
   launchAnimations();
-  distractionIntervale = setInterval(launchAnimations, 36000);
+  distractionIntervale = setInterval(launchAnimations, 29000);
 };
 
 export const removeDistractions = () => {
@@ -153,7 +152,7 @@ export const removeDistractions = () => {
   removeClass(p, paragraphAnimation);
   removeClass(img, imgAnimation_1);
   removeClass(h2, headingAnimation);
-  removeClass(imgEl_0, imgAnimation_0);
+  removeClass(button, buttonAnimation);
   removeClass(textEl_0, textAnimation_0);
   removeClass(textEl_1, textAnimation_1);
   removeClass(textEl_2, textAnimation_2);

diff --git a/styles/globals.css b/styles/globals.css
@@ -50,12 +50,6 @@ a {
   z-index: 10000 !important;
 }
 
-.wds-img-element.wds-img-animation-0 {
-  display: block !important;
-  background-image: url("/images/burger.png") !important;
-  animation: move 5s infinite !important;
-}
-
 @keyframes move {
   from {
     top: -300px;
@@ -184,7 +178,11 @@ a {
 }
 
 .wds-paragraph-animation {
-  animation: flickerAnimation 1.2s infinite !important;
+  animation: flickerAnimation 1s infinite !important;
+}
+
+.wds-button-animation {
+  animation: flickerAnimation 1s infinite !important;
 }
 
 @keyframes flickerAnimation {