special thanks animation

nekko-lab · Nov 23, 2024 · 56934df · 56934df
1 parent d63d20d
commit 56934df
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 14 deletions.
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -69,6 +69,9 @@ export default component$(() => {
             <li>
               <HeaderLink value="SpecialThanks" />
             </li>
+            <li>
+              <HeaderLink value="Ads" />
+            </li>
           </ul>
         </nav>
       </div>
@@ -257,6 +260,12 @@ export default component$(() => {
                   <HeaderLink value="SpecialThanks" />
                 </span>
               </li>
+              <li>
+                <span></span>
+                <span>
+                  <HeaderLink value="Ads" />
+                </span>
+              </li>
             </ul>
           </nav>
         </div>

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -346,6 +346,16 @@ export default component$(() => {
           {/* --- Venue --- */}
           <Section>
             <Heading value="SpecialThanks" description="協力" />
+            <Block Title="ステージ共同制作">
+              <p
+                class={css({
+                  marginBottom: 20,
+                })}
+              >
+                けんとけん かずま
+              </p>
+            </Block>
+            <Heading value="Ads" description="広告" />
             <budoux-ja>
               <div
                 class={css({
@@ -354,22 +364,21 @@ export default component$(() => {
                   margin: 5,
                   gap: 4,
                   flexWrap: "wrap",
+                  opacity: 0,
+                  transform: "translateX(-10px)",
                 })}
+                onQVisible$={(e) => {
+                  animate(
+                    e.detail.target,
+                    { opacity: 1, transform: "translateX(0px)" },
+                    {
+                      duration: 0.6,
+                      delay: base_delay + 0.45,
+                      easing: "ease-in-out",
+                    },
+                  );
+                }}
               >
-                <div
-                  class={css({
-                    height: "500px",
-                    width: "353px",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    border: "white 1px solid",
-                    fontSize: "30px",
-                    backdropFilter: "blur(1px)",
-                  })}
-                >
-                  Kazuma
-                </div>
                 <div>
                   <Nekoteru
                     class={css({