chore: adjust header animation delay, duration and style

eazypau · Feb 9, 2024 · daf7d23 · daf7d23
1 parent a41fe67
commit daf7d23
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 25 deletions.
diff --git a/assets/css/tailwind.scss b/assets/css/tailwind.scss
@@ -99,7 +99,7 @@ header {
   }
 
   div.content {
-    @apply relative z-20 mx-auto top-[25%] lg:top-[28%] w-[90%] md:w-4/5 lg:w-1/2 xl:w-[45%] h-[40%] lg:h-[40%] 2xl:h-[35%] px-7 md:px-10 rounded-md bg-white dark:bg-[#171717] border-t border-gray-100 dark:border-none shadow-lg shadow-gray-500 dark:shadow-gray-700 transition duration-300 ease-out;
+    @apply relative z-20 mx-auto top-[25%] lg:top-[28%] w-[90%] md:w-4/5 lg:w-1/2 xl:w-[45%] h-[40%] lg:h-[40%] 2xl:h-[35%] px-7 md:px-10 rounded-md bg-white dark:bg-[#171717] border-t border-gray-100 dark:border-none shadow-lg shadow-gray-700 dark:shadow-md dark:shadow-gray-400 transition duration-300 ease-out;
   }
 
   // div:last-child {

diff --git a/components/Header.vue b/components/Header.vue
@@ -12,7 +12,7 @@
       />
     </div> -->
     <TransitionGroup name="list" tag="div" class="header-bg">
-      <div v-for="rectang in rectangs" :key="rectang" :style="rectang"></div>
+      <div v-for="rectang in columns" :key="rectang" :style="rectang"></div>
       <img v-if="showBgImg" src="/red-blue.jpg" width="1920" height="1280" alt="blue red fusion" />
     </TransitionGroup>
     <div class="content">
@@ -31,17 +31,16 @@
   </header>
 </template>
 <script setup>
-import { ref, onMounted } from "vue";
 // const loading = ref(true);
-
-const rectangs = ref([]);
+const columns = ref([]);
 const counter = ref(0);
-const numOfRectang = ref(4);
+const numOfColumns = ref(4);
 const currentLeftPosition = ref(20)
 const width = 2
-const speed = 50;
-const rectangDelay = ref(1500)
-const typeWriterDelay = ref(2000)
+const typeSpeed = 50;
+const columnSpeed = 100;
+const rectangDelay = ref(1300)
+const typeWriterDelay = ref(2500)
 const showBgImg = ref(false)
 const { enabled } = useTheme()
 const { transitionCompletedOnce } = useTransitionTracking()
@@ -60,14 +59,14 @@ const intro = [
 ];
 
 
-const addSquare = () => {
-  if (counter.value < numOfRectang.value) {
+const addColumns = () => {
+  if (counter.value < numOfColumns.value) {
     const positionY = 0
     const styling = `height: 100%; width: ${width}%; top: ${positionY}; left: ${currentLeftPosition.value}%`;
-    rectangs.value.push(styling);
+    columns.value.push(styling);
     currentLeftPosition.value += 20
     counter.value++;
-    setTimeout(addSquare, speed);
+    setTimeout(addColumns, columnSpeed);
   }
 };
 
@@ -78,29 +77,30 @@ const typeWriter = () => {
     if (i.value < intro[j.value].length) {
       introObj.value[currentLine] += intro[j.value][i.value];
       i.value++;
-      setTimeout(typeWriter, speed);
+      setTimeout(typeWriter, typeSpeed);
     } else {
       if (j.value < 2) i.value = 0;
       j.value++;
-      if (j.value < 3) setTimeout(typeWriter, speed);
+      if (j.value < 3) setTimeout(typeWriter, typeSpeed);
     }
   }
 };
 
 const assignDelayAmount = () => {
   if (window.innerWidth < 500) {
     if (enabled.value) {
-      typeWriterDelay.value = 300
+      typeWriterDelay.value = 800
     } else {
-      rectangDelay.value = transitionCompletedOnce.value ? 0 : 600
-      typeWriterDelay.value = transitionCompletedOnce.value ? 400 : 1000
+      rectangDelay.value = 0
+      typeWriterDelay.value = 1200
     }
   } else {
     if (enabled.value) {
-      typeWriterDelay.value = transitionCompletedOnce.value ? 300 : 1200
+      rectangDelay.value = 0
+      typeWriterDelay.value = transitionCompletedOnce.value ? 800 : 2100
     } else {
-      rectangDelay.value = transitionCompletedOnce.value ? 0 : 1500
-      typeWriterDelay.value = transitionCompletedOnce.value ? 500 : 2000
+      rectangDelay.value = transitionCompletedOnce.value ? 0 : 1300
+      typeWriterDelay.value = transitionCompletedOnce.value ? 1200 : 2500
     }
   }
 }
@@ -109,18 +109,18 @@ watchEffect(() => {
   if (counter.value === 4 && !enabled.value) {
     setTimeout(() => {
       showBgImg.value = true
-    }, 500);
+    }, 200);
   } else if (enabled.value) {
     setTimeout(() => {
       showBgImg.value = true
-    }, 800);
+    }, transitionCompletedOnce ? 0 : 1200);
   }
 })
 
 onMounted(() => {
   assignDelayAmount()
   setTimeout(() => {
-    addSquare()
+    addColumns()
   }, rectangDelay.value);
   if (counter.value === 4 && !enabled.value) {
     setTimeout(() => {
@@ -129,7 +129,7 @@ onMounted(() => {
   } else if (enabled.value) {
     setTimeout(() => {
       showBgImg.value = true
-    }, 800);
+    }, transitionCompletedOnce ? 0 : 1200);
   }
   setTimeout(() => {
     typeWriter()