💄 rootページへlottie追加

wappon28dev · Nov 9, 2024 · 395a9fc · 395a9fc
1 parent 147b8a3
commit 395a9fc
Show file tree

Hide file tree

Showing 6 changed files with 464 additions and 448 deletions.
diff --git a/src/assets/animations/logoanimation.json b/src/assets/animations/logoanimation.json
diff --git a/src/components/LogoAnimation.tsx b/src/components/LogoAnimation.tsx
@@ -1,18 +1,20 @@
 import { VStack } from "panda/jsx";
 import { type ReactElement } from "react";
 import LottiePlayer from "./LottiePlayer";
-import loading from "@/assets/animations/loading.json";
+import logoAnimation from "@/assets/animations/logoAnimation.json";
 
 export function LogoAnimation(): ReactElement {
   return (
     <VStack>
       <LottiePlayer
         autoplay
-        src={loading}
+        stopAtEnd={true}
+        src={logoAnimation}
         style={{
-          height: "250px",
-          margin: "-50px",
+          height: "40dvh",
+          maxWidth: "70dvw",
         }}
+        speed={0.7}
       />
     </VStack>
   );

diff --git a/src/components/LottiePlayer.tsx b/src/components/LottiePlayer.tsx
@@ -1,24 +1,42 @@
 import { Player, type PlayerEvent } from "@lottiefiles/react-lottie-player";
 import { type AnimationItem } from "lottie-web";
 import { styled as p } from "panda/jsx";
-import { type ComponentProps, useState, type ReactElement } from "react";
+import {
+  type ComponentProps,
+  useState,
+  useEffect,
+  type ReactElement,
+} from "react";
 
 export default function LottiePlayer({
   reverseLoop,
+  stopAtEnd,
   ...props
 }: {
   reverseLoop?: boolean;
+  stopAtEnd?: boolean;
 } & ComponentProps<typeof Player>): ReactElement {
   const [lottieState, setLottieState] = useState<AnimationItem>();
 
   let isForward = true;
   const _reverseLoop = reverseLoop ?? false;
+  const _stopAtEnd = stopAtEnd ?? false;
+
+  useEffect(() => {
+    if (_stopAtEnd && lottieState) {
+      const lastFrame = lottieState.totalFrames - 1;
+
+      lottieState.addEventListener("complete", () => {
+        lottieState.goToAndStop(lastFrame, true);
+      });
+    }
+  }, [lottieState, _stopAtEnd]);
 
   const eventHandler = (e: PlayerEvent): void => {
     if (e === "loop" && _reverseLoop) {
       isForward = !isForward;
       lottieState?.setDirection(isForward ? 1 : -1);
-      const startFrame = isForward ? 0 : lottieState?.totalFrames ?? 0;
+      const startFrame = isForward ? 0 : (lottieState?.totalFrames ?? 0) - 1;
       lottieState?.goToAndPlay(startFrame, true);
     }
   };
@@ -30,6 +48,7 @@ export default function LottiePlayer({
           setLottieState(instance);
         }}
         onEvent={eventHandler}
+        loop={!_stopAtEnd}
         style={{
           height: "100%",
         }}

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -7,9 +7,9 @@ import headerLeft from "@/assets/svg/background/header-left.svg";
 import headerRight from "@/assets/svg/background/header-right.svg";
 import wakaba from "@/assets/svg/background/wakaba.svg";
 import wakabaIcon from "@/assets/svg/icon/wakaba.svg";
-import { LogoComposite } from "@/components/Logo";
 import { Button } from "@/components/cva/Button";
 import { Expanded } from "@/components/cva/Expanded";
+import { LogoAnimation } from "@/components/LogoAnimation";
 
 export const Route = createFileRoute("/")({
   component: () => {
@@ -55,81 +55,86 @@ export const Route = createFileRoute("/")({
       triggerOnce: true,
     });
 
-    const [header, inViewHeader] = useInView({
-      rootMargin: (() => {
-        if (window.innerWidth >= 1280) return "-350px";
-        if (window.innerWidth >= 640) return "-350px";
-        return "-200px";
-      })(),
-      triggerOnce: true,
-    });
-
     return (
       <Expanded alignItems="start">
         <p.div
-          ref={header}
           backgroundColor="white"
           display="grid"
-          fadeIn="10"
+          duration="1000"
+          slideInX="-10"
           height={{
-            sm: "600px",
-            lg: "40vh",
+            base: "50vh",
+            sm: "50vh",
+
+            lg: "50vh",
             xl: "50vh",
           }}
-          placeItems="center"
-          py="20"
           style={{
             position: "relative",
-            backgroundImage: `url("${headerRight}"), url("${headerLeft}")`,
-            backgroundRepeat: "no-repeat, no-repeat",
-            backgroundPosition: "right top, left bottom",
-            backgroundSize: "auto 50%, auto 50%",
+            backgroundImage: `url("${headerLeft}")`,
+            backgroundRepeat: "no-repeat",
+            backgroundPosition: "left bottom",
+            backgroundSize: "70% auto",
           }}
         >
-          {inViewHeader && (
-            <LogoComposite
-              duration="1000"
-              fadeIn="10"
-              slideInY="10"
-              style={{
-                zIndex: 1,
-                position: "relative",
-              }}
-              zoom={{
-                base: 2,
-                smDown: 1.5,
-              }}
-            />
-          )}
+          <p.div
+            fadeIn="8"
+            slideInX="20"
+            position="relative"
+            style={{
+              position: "relative",
+              backgroundImage: `url("${headerRight}")`,
+              backgroundRepeat: "no-repeat",
+              backgroundPosition: "right top",
+              backgroundSize: "70% auto",
+            }}
+          >
+            <p.div
+              slideInX="-10"
+              placeItems="center"
+              m="0 auto"
+              height="100%"
+              verticalAlign="middle"
+              position="absolute"
+              left="0"
+              right="0"
+              bottom="0"
+              margin="auto"
+            >
+              <LogoAnimation />
+            </p.div>
+          </p.div>
         </p.div>
 
         <p.div
           ref={ref1}
           display="grid"
           fadeIn="2"
+          slideInX="100"
           height={{ base: "400px", sm: "600px", lg: "40vh", xl: "60vh" }}
           placeItems="center"
           style={{
-            position: "relative",
             backgroundImage: `url("${wakabaIcon}"), url("${decorationRight}")`,
             backgroundSize: "auto 15%, auto 15%",
             backgroundPosition: "5% bottom , 85% bottom",
             backgroundRepeat: "no-repeat, no-repeat",
           }}
         >
-          {inView1 && (
-            <p.div duration="1000" fadeIn="5" slideInY="10">
-              <p.h2 fontSize="3rem" fontWeight="bold" textAlign="center">
-                Wakabaとは
-              </p.h2>
+          <p.div fadeIn="2" slideInX="100">
+            {inView1 && (
+              <p.div duration="1000" fadeIn="5" slideInY="10">
+                <p.h2 fontSize="3rem" fontWeight="bold" textAlign="center">
+                  Wakabaとは
+                </p.h2>
 
-              <p.p fontSize="1rem" mt="20px" mx="auto" textAlign="center">
-                アイデアの種をあつめ形にするサービスです。
-                <br />
-                あなたの投稿したアイデアがこの町の明日を豊かにするかも！
-              </p.p>
-            </p.div>
-          )}
+                <p.p fontSize="1rem" mt="20px" mx="auto" textAlign="center">
+                  アイデアの種をあつめ形にするサービスです。
+                  <br />
+                  あなたの投稿したアイデアがこの町の明日を豊かにするかも！
+                </p.p>
+              </p.div>
+            )}
+          </p.div>
         </p.div>
 
         <p.div