From e5d75aad3b5c09af50147df1ba339731a080c44e Mon Sep 17 00:00:00 2001 From: ROTO0504 <88580483+ROTO0504@users.noreply.github.com> Date: Tue, 5 Nov 2024 22:01:02 +0900 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20overview=E3=81=A8backgroundImage?= =?UTF-8?q?=E3=81=AE=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/background/circle.svg | 13 ++ .../svg/background/decoration-right.svg | 16 ++ src/assets/svg/background/header-left.svg | 33 +++ src/assets/svg/background/header-right.svg | 33 +++ src/assets/svg/icon/wakaba.svg | 27 +++ src/routes/index.tsx | 204 ++++++++++++++---- 6 files changed, 279 insertions(+), 47 deletions(-) create mode 100644 src/assets/svg/background/circle.svg create mode 100644 src/assets/svg/background/decoration-right.svg create mode 100644 src/assets/svg/background/header-left.svg create mode 100644 src/assets/svg/background/header-right.svg create mode 100644 src/assets/svg/icon/wakaba.svg diff --git a/src/assets/svg/background/circle.svg b/src/assets/svg/background/circle.svg new file mode 100644 index 0000000..4997f70 --- /dev/null +++ b/src/assets/svg/background/circle.svg @@ -0,0 +1,13 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/background/decoration-right.svg b/src/assets/svg/background/decoration-right.svg new file mode 100644 index 0000000..0abf4e7 --- /dev/null +++ b/src/assets/svg/background/decoration-right.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/background/header-left.svg b/src/assets/svg/background/header-left.svg new file mode 100644 index 0000000..e8e6a3d --- /dev/null +++ b/src/assets/svg/background/header-left.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/background/header-right.svg b/src/assets/svg/background/header-right.svg new file mode 100644 index 0000000..629c6e4 --- /dev/null +++ b/src/assets/svg/background/header-right.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/icon/wakaba.svg b/src/assets/svg/icon/wakaba.svg new file mode 100644 index 0000000..f6121ad --- /dev/null +++ b/src/assets/svg/icon/wakaba.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/routes/index.tsx b/src/routes/index.tsx index acef52b..0543ca2 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,8 +1,12 @@ import { createFileRoute, Link } from "@tanstack/react-router"; import { styled as p } from "panda/jsx"; import { useInView } from "react-intersection-observer"; -import obi from "@/assets/svg/background/obi.svg"; +import circle from "@/assets/svg/background/circle.svg"; +import decorationRight from "@/assets/svg/background/decoration-right.svg"; +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"; @@ -10,72 +14,117 @@ import { Expanded } from "@/components/cva/Expanded"; export const Route = createFileRoute("/")({ component: () => { const [ref1, inView1] = useInView({ - rootMargin: "-350px", + rootMargin: (() => { + if (window.innerWidth >= 1280) return "-1000px"; + if (window.innerWidth >= 640) return "-350px"; + return "-200px"; + })(), triggerOnce: true, }); const [ref2, inView2] = useInView({ - rootMargin: "-350px", + rootMargin: (() => { + if (window.innerWidth >= 1280) return "-1000px"; + if (window.innerWidth >= 640) return "-350px"; + return "-200px"; + })(), triggerOnce: true, }); const [ref3, inView3] = useInView({ - rootMargin: "-350px", + rootMargin: (() => { + if (window.innerWidth >= 1280) return "-1000px"; + if (window.innerWidth >= 640) return "-350px"; + return "-200px"; + })(), triggerOnce: true, }); const [ref4, inView4] = useInView({ - rootMargin: "350px", + rootMargin: (() => { + if (window.innerWidth >= 1280) return "-1000px"; + if (window.innerWidth >= 640) return "-350px"; + return "-200px"; + })(), + triggerOnce: true, + }); + + const [ref5, inView5] = useInView({ + rootMargin: (() => { + if (window.innerWidth >= 1280) return "-1000px"; + if (window.innerWidth >= 640) return "-350px"; + return "-200px"; + })(), + triggerOnce: true, + }); + + const [header, inViewHeader] = useInView({ + rootMargin: (() => { + if (window.innerWidth >= 1280) return "-1000px"; + if (window.innerWidth >= 640) return "-350px"; + return "-200px"; + })(), triggerOnce: true, }); return ( - + {inViewHeader && ( + + )} {inView1 && ( - + Wakabaとは - + アイデアの種をあつめ形にするサービスです。
あなたの投稿したアイデアがこの町の明日を豊かにするかも！ @@ -88,34 +137,30 @@ export const Route = createFileRoute("/")({ ref={ref4} background="wkb.primary" display="grid" - height={{ base: "400px", sm: "600px" }} + fadeIn="2" + height={{ base: "400px", sm: "600px", xl: "60vh" }} placeItems="center" + style={{ + backgroundImage: `url(${wakaba}), url(${circle})`, + backgroundSize: "auto 40%, auto 5%", + backgroundPosition: "5% bottom , 73% 20%", + backgroundRepeat: "no-repeat, no-repeat", + }} > {inView4 && ( {inView2 && ( - + 実際に初めてみる @@ -161,7 +209,7 @@ export const Route = createFileRoute("/")({ ref={ref3} background="wkb.bg" display="grid" - height={{ base: "500px", sm: "800px" }} + height={{ base: "500px", sm: "800px", xl: "60vh" }} placeItems="center" width={{ base: "100%", sm: "100%" }} > @@ -254,6 +302,68 @@ export const Route = createFileRoute("/")({ )} + + {inView5 && ( + + + + Overview + + + マップ上から近くのプロジェクトを探してみる + + + + + + + + + )} + ); },