Merge pull request #110 from Kyutech-C3/feature/#108-top-title-backgr…

…ound

add:トップページのタイトル背景画像の作成 #108

src/components/Web/TopBackground/TopBackground.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { TopBackground } from "./TopBackground";
+
+export default {
+    title: "Web/TopBackground",
+    component: TopBackground,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    argTypes: {},
+} as Meta<typeof TopBackground>;
+
+export const Default: StoryObj<typeof TopBackground> = {
+    args: {
+        hovering: "hack",
+    },
+};

src/components/Web/TopBackground/TopBackground.tsx

@@ -0,0 +1,66 @@
+import { imagePaths } from "@/constants/topBackground";
+import { TopBackgroundProps } from "@/types/web";
+import { Box, Stack, useMediaQuery } from "@mui/material";
+
+export const TopBackground = ({ hovering }: TopBackgroundProps) => {
+    const isDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+    const isSmall = useMediaQuery("(min-width:800px)");
+
+    return (
+        <Stack
+            direction={isSmall ? "column" : "row"}
+            sx={{
+                position: "absolute",
+                width: "100vw",
+                height: "100vh",
+                overflow: "hidden",
+                backgroundColor: "black",
+                zIndex: -100,
+            }}
+        >
+            {imagePaths.map(({ department, imagePath }, index) => (
+                <Box
+                    component="div"
+                    sx={{
+                        backgroundImage: `url(${imagePath})`,
+                        backgroundSize: "cover",
+                        backgroundPosition: "center",
+                        width: isSmall ? "32vw" : "100%",
+                        height: isSmall ? "100%" : "32vh",
+                        position: "absolute",
+                        top: isSmall ? "0" : `${index * 17}vh`,
+                        left: isSmall ? `${index * 17}vw` : "0",
+                        clipPath: isSmall
+                            ? "polygon(100% 0%, 50% 100%, 0% 100%, 50% 0%)"
+                            : "polygon(100% 0%, 100% 50%, 0% 100%, 0% 50%)",
+                        animation: `down 0.3s`,
+                        animationDuration: `${index * 0.15 + 0.6}s`,
+                        transform: `scale(${hovering == department ? 1.1 : 1})`,
+                        transition: "0.8s transform",
+                        "@keyframes down": {
+                            "0%": {
+                                transform:
+                                    "translateX(30vh) translateY(-100vh)",
+                            },
+                            "100%": {
+                                transform: "translateX(0) translateY(0)",
+                            },
+                        },
+                    }}
+                >
+                    <Box
+                        component="div"
+                        sx={{
+                            width: isSmall ? "100%" : "100vw",
+                            height: isSmall ? "100vh" : "100%",
+                            backgroundColor: `rgba(${isDarkMode ? 0 : 255}, ${
+                                isDarkMode ? 0 : 255
+                            }, ${isDarkMode ? 0 : 255},0.5)`,
+                            backdropFilter: "blur(3px)",
+                        }}
+                    ></Box>
+                </Box>
+            ))}
+        </Stack>
+    );
+};

src/constants/topBackground.ts

@@ -0,0 +1,27 @@
+export const imagePaths = [
+    {
+        department: "hack",
+        imagePath:
+            "https://img.freepik.com/free-photo/cute-kitten-staring-out-the-window-playful-curiosity-generative-ai_188544-12520.jpg",
+    },
+    {
+        department: "game",
+        imagePath:
+            "https://img.freepik.com/free-photo/cute-kitten-staring-out-the-window-playful-curiosity-generative-ai_188544-12520.jpg",
+    },
+    {
+        department: "2dcg",
+        imagePath:
+            "https://img.freepik.com/free-photo/cute-kitten-staring-out-the-window-playful-curiosity-generative-ai_188544-12520.jpg",
+    },
+    {
+        department: "3dcg",
+        imagePath:
+            "https://img.freepik.com/free-photo/cute-kitten-staring-out-the-window-playful-curiosity-generative-ai_188544-12520.jpg",
+    },
+    {
+        department: "music",
+        imagePath:
+            "https://img.freepik.com/free-photo/cute-kitten-staring-out-the-window-playful-curiosity-generative-ai_188544-12520.jpg",
+    },
+];

src/types/web.ts

@@ -60,3 +60,6 @@ export type CategoryOutlineCardProps = {
     caption: string;
     redirectPath: string;
 };
+export type TopBackgroundProps = {
+    hovering: "hack" | "game" | "2dcg" | "3dcg" | "music" | "";
+};