From 00100b089f476f88f48bfd85bb399d05e282c62c Mon Sep 17 00:00:00 2001
From: eggy <d7chen@uwaterloo.ca>
Date: Fri, 1 Mar 2024 15:50:04 -0500
Subject: [PATCH] feat: add scrolling welcome title

css only!
---
 components/HeaderLoop.vue | 101 ++++++++++++++++++++++++++++++++++++++
 pages/index.vue           |   4 +-
 2 files changed, 104 insertions(+), 1 deletion(-)
 create mode 100644 components/HeaderLoop.vue

diff --git a/components/HeaderLoop.vue b/components/HeaderLoop.vue
new file mode 100644
index 0000000..8df0791
--- /dev/null
+++ b/components/HeaderLoop.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+const props = defineProps<{ strings: string[]; class?: string }>();
+</script>
+
+<template>
+  <h1 :class="[props.class, 'text-loop relative text-center w-full h-16']">
+    <span class="text absolute w-full" v-for="s in props.strings" :key="s">
+      {{ s }}
+    </span>
+  </h1>
+</template>
+
+<style scoped lang="scss">
+@use "sass:math";
+@mixin text-loop($els) {
+  .text-loop {
+    overflow: hidden;
+    $duration: 3s;
+
+    @if $els > 1 {
+      & > span {
+        display: block;
+        opacity: 0;
+        @for $i from 1 through $els {
+          &:nth-child(#{$i}) {
+            animation: move-test-#{$i} $duration * $els infinite;
+          }
+        }
+      }
+    }
+  }
+
+  @for $i from 1 through $els {
+    @keyframes move-test-#{$i} {
+      $interval: calc(100% / $els);
+      $upper_bound: $interval * $i;
+      $lower_bound: $interval * ($i - 1);
+
+      // we try to make the previous exit and the next enter
+      // at the same time, also taking care of negatives
+
+      // for i = 1, this is negative, so start the animation at the end of the cycle
+      @if $i > 1 {
+        0% {
+          opacity: 0;
+          transform: translateY(100%);
+        }
+
+        #{$lower_bound - $interval * 0.05} {
+          opacity: 0;
+          transform: translateY(100%);
+        }
+      }
+
+      #{$lower_bound} {
+        opacity: 1;
+        transform: translateY(0%);
+      }
+
+      #{$lower_bound + $interval * 0.95} {
+        opacity: 1;
+        transform: translateY(0%);
+      }
+
+      #{$upper_bound} {
+        opacity: 0;
+        transform: translateY(-100%);
+      }
+
+      @if $i == 1 {
+        // reset el 1
+        #{100% - $interval * 0.05} {
+          opacity: 0;
+          transform: translateY(100%);
+        }
+        100% {
+          opacity: 1;
+          transform: translateY(0%);
+        }
+      } @else {
+        100% {
+          opacity: 0;
+          transform: translateY(-100%);
+        }
+      }
+    }
+  }
+}
+
+/**
+  * For one element, we have the following pattern. To expand it to 2+
+  * els, we divide 100% by the number of els and turn on the animation
+  * only at the correct time.
+  * 0%: invis
+  * 20%: vis
+  * 90%: vis
+  * 100%: invis
+  */
+
+@include text-loop(3);
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index 121a3d3..faac3cb 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -4,12 +4,14 @@ import About from "@/components/index/about.vue";
 
 //definePageMeta({ layout: "withtop" });
 useTitle("Home", "Personal website!");
+
+const welcomeStrings = ["Welcome!", "Bienvenue!", "欢迎!"];
 </script>
 
 <template>
   <main class="flex flex-col items-center justify-around gap-8">
     <div class="flex flex-col items-center">
-      <h1 class="text-bitter font-bold">Welcome!</h1>
+      <HeaderLoop class="text-bitter font-bold" :strings="welcomeStrings" />
       <p>What are you here to see?</p>
       <p>
         For my portfolio, please visit