Skip to content

Commit

Permalink
style : add animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@raylee0519
raylee0519 committed Aug 3, 2022
1 parent af2d522 commit 9e260c7
Show file tree
Hide file tree
Showing 4 changed files with 175 additions and 115 deletions.
53 changes: 53 additions & 0 deletions frontend/src/actions/useScrollFadeIn.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { useRef, useEffect, useCallback } from 'react';

const useScrollFadeIn = (direction = 'up', duration = 1, delay = 0) => {
const element = useRef();

const handleDirection = (name) => {
switch (name) {
case 'up':
return 'translate3d(0, 50%, 0)';
case 'down':
return 'translate3d(0, -50%, 0)';
case 'left':
return 'translate3d(50%, 0, 0)';
case 'right':
return 'translate3d(-50%, 0, 0)';
default:
return;
}
};

const onScroll = useCallback(
([entry]) => {
const { current } = element;
if (entry.isIntersecting) {
current.style.transitionProperty = 'all';
current.style.transitionDuration = `${duration}s`;
current.style.transitionTimingFunction = 'cubic-bezier(0, 0, 0.2, 1)';
current.style.transitionDelay = `${delay}s`;
current.style.opacity = 1;
current.style.transform = 'translate3d(0, 0, 0)';
}
},
[delay, duration],
);

useEffect(() => {
let observer;

if (element.current) {
observer = new IntersectionObserver(onScroll, { threshold: 0.7 });
observer.observe(element.current);
}

return () => observer && observer.disconnect();
}, [onScroll]);

return {
ref: element,
style: { opacity: 0, transform: handleDirection(direction) },
};
};

export default useScrollFadeIn;
2 changes: 1 addition & 1 deletion frontend/src/components/Mypage/UserChallenge.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function UserChallenge({ num = 1, type }: Props) {
display: "flex",
flexDirection: "column",
alignItems: "center",
marginTop: 20,
marginTop: 5,
}}
>
<img src={whatChallenge?.imgT} alt="008" style={{ width: 250 }} />
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/mainpage/PopularTrash.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { Typography, Box } from "@mui/material";
import TrashCardView from "./TrashCardView";
import AutoGraphIcon from '@mui/icons-material/AutoGraph';
import useScrollFadeIn from '../../actions/useScrollFadeIn';


function PopularTrash() {
return (
<Box textAlign={"center"} >
<Box sx={{ mt: 15, mb: 7 }}>
<Box sx={{ mt: 15, mb: 7 }} {...useScrollFadeIn('down', 1)}>
<Typography
sx={{ fontSize: 50, mt: 10, fontFamily: "Itim", color: "#737458" }}
>This Week's Ranking
Expand Down
232 changes: 119 additions & 113 deletions frontend/src/components/mainpage/TrashCardView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,8 @@ import {
CardMedia,
Typography,
} from "@mui/material";
import { decodeToken } from "src/Auth/tokenGetter";
import axios from "axios";
import { response } from "express";
import useScrollFadeIn from '../../actions/useScrollFadeIn';

interface BaseContent {
kind: string;
Expand Down Expand Up @@ -99,139 +98,146 @@ function MultiActionAreaCard() {

return (
<Grid container
sx={{ display: "flex", direction:"column", flexWrap: "wrap"}}
sx={{ display: "flex", direction: "column", flexWrap: "wrap" }}
>
<Grid item
sx={{ p: 2, width:"100%", justifyContent : "flex-start"}}>
<Grid item
sx={{ p: 2, width: "100%", justifyContent: "flex-start" }}
>
<Typography
sx={{ fontSize: 40, mt: 10, fontFamily: "Itim", color: "#737458" }}
>1st
</Typography>
<Box sx={{
width: 800, border: 0,
backgroundColor: "white",
borderColor: "#759F98",
borderRadius: 5,
boxShadow: "1px 3px 3px #B0B09A",
margin: "auto",
mt: 5
}}>
<CardActionArea sx ={{borderRadius : 5}}>
<CardMedia component="img" height="500" width="450" image={firstData?.images} sx ={{borderRadius : 5}}/>
<Typography
fontSize={40}
component="div"
margin={1}
marginTop={2}
sx={{ fontFamily: "Itim", color: "#737458" }}
>
{firstData?.kind}
</Typography>
</CardActionArea>
<Box {...useScrollFadeIn('up', 1)}>
<Box sx={{
width: 800, border: 0,
backgroundColor: "white",
borderColor: "#759F98",
borderRadius: 5,
boxShadow: "1px 3px 3px #B0B09A",
margin: "auto",
mt: 5,
}}>
<CardActionArea sx={{ borderRadius: 5 }} >
<CardMedia component="img" height="500" width="450" image={firstData?.images} sx={{ borderRadius: 5 }} />
<Typography
fontSize={40}
component="div"
margin={1}
marginTop={2}
sx={{ fontFamily: "Itim", color: "#737458" }}
>
{firstData?.kind}
</Typography>
</CardActionArea>
</Box>
<Button
variant="text"
onClick={() => {
navigate(`/defaulthowpage`, {
state: {
needKind: firstData?.kind,
needImages: firstData?.images,
},
});
}}
sx={{ mt: 3, margin: "auto", fontFamily: "Itim", color: "#737458", fontSize: 20 }}
>
How to Recycle this {firstData?.kind}??
</Button>
</Box>
<Button
variant="text"
onClick={() => {
navigate(`/defaulthowpage`, {
state: {
needKind: firstData?.kind,
needImages: firstData?.images,
},
});
}}
sx={{ mt:3, margin: "auto", fontFamily: "Itim", color: "#737458", fontSize: 20 }}
>
How to Recycle this {firstData?.kind}??
</Button>
</Grid>

<Grid item
sx={{ p: 2, width:"100%", marginLeft:"15cm",justifyContent:"flex-end"}}>
sx={{ p: 2, width: "100%", marginLeft: "15cm", justifyContent: "flex-end" }}>
<Typography
sx={{ fontSize: 40, mt: 10, fontFamily: "Itim", color: "#737458" }}
>2nd
</Typography>
<Box sx={{
width: 650, border: 0,
backgroundColor: "white",
borderColor: "#759F98",
borderRadius: 5,
boxShadow: "1px 3px 3px #B0B09A",
margin: "auto",
mt: 5
}}>
<CardActionArea sx ={{borderRadius : 5}}>
<CardMedia component="img" height="500" width="450" image={secondData?.images} sx ={{borderRadius : 5}}/>
<Typography
fontSize={40}
component="div"
margin={1}
marginTop={2}
sx={{ fontFamily: "Itim", color: "#737458" }}
>
{secondData?.kind}
</Typography>
</CardActionArea>
</Box>
<Box {...useScrollFadeIn('up', 1)}>
<Box sx={{
width: 650, border: 0,
backgroundColor: "white",
borderColor: "#759F98",
borderRadius: 5,
boxShadow: "1px 3px 3px #B0B09A",
margin: "auto",
mt: 5,
}}>
<CardActionArea sx={{ borderRadius: 5 }}>
<CardMedia component="img" height="500" width="450" image={secondData?.images} sx={{ borderRadius: 5 }} />
<Typography
fontSize={40}
component="div"
margin={1}
marginTop={2}
sx={{ fontFamily: "Itim", color: "#737458" }}
>
{secondData?.kind}
</Typography>
</CardActionArea>
</Box>

<Button
variant="text"
onClick={() => {
navigate(`/defaulthowpage`, {
state: {
needKind: secondData?.kind,
needImages: secondData?.images,
},
});
}}
sx={{ mt:3, margin: "auto", fontFamily: "Itim", color: "#737458", fontSize: 20 }}
>
How to Recycle this {secondData?.kind}??
</Button>
<Button
variant="text"
onClick={() => {
navigate(`/defaulthowpage`, {
state: {
needKind: secondData?.kind,
needImages: secondData?.images,
},
});
}}
sx={{ mt: 3, margin: "auto", fontFamily: "Itim", color: "#737458", fontSize: 20 }}
>
How to Recycle this {secondData?.kind}??
</Button>
</Box>
</Grid>

<Box
sx={{ p: 2, width:"100%", marginRight:"20cm" }}>
sx={{ p: 2, width: "100%", marginRight: "20cm" }}>
<Typography
sx={{ fontSize: 40, mt: 10, fontFamily: "Itim", color: "#737458" }}
>3rd
</Typography>
<Box sx={{
width: 450, border: 1,
backgroundColor: "white",
borderColor: "white",
borderRadius: 5,
boxShadow: "1px 3px 3px #B0B09A",
margin: "auto",
mt: 5
}}>
<CardActionArea sx ={{borderRadius : 5}}>
<CardMedia component="img" height="500" width="450" image ={thridData?.images} sx ={{borderRadius : 5}} />
<Typography
fontSize={40}
component="div"
margin={1}
marginTop={2}
sx={{ fontFamily: "Itim", color: "#737458" }}
>
{thridData?.kind}
</Typography>
</CardActionArea>
<Box {...useScrollFadeIn('up', 1)}>
<Box sx={{
width: 450, border: 1,
backgroundColor: "white",
borderColor: "white",
borderRadius: 5,
boxShadow: "1px 3px 3px #B0B09A",
margin: "auto",
mt: 5
}}>
<CardActionArea sx={{ borderRadius: 5 }}>
<CardMedia component="img" height="500" width="450" image={thridData?.images} sx={{ borderRadius: 5 }} />
<Typography
fontSize={40}
component="div"
margin={1}
marginTop={2}
sx={{ fontFamily: "Itim", color: "#737458" }}
>
{thridData?.kind}
</Typography>
</CardActionArea>
</Box>
<Button
variant="text"
onClick={() => {
navigate(`/defaulthowpage`, {
state: {
needKind: thridData?.kind,
needImages: thridData?.images,
},
});
}}
sx={{ mt: 3, margin: "auto", fontFamily: "Itim", color: "#737458", fontSize: 20 }}
>
How to Recycle this {thridData?.kind}??
</Button>
</Box>
<Button
variant="text"
onClick={() => {
navigate(`/defaulthowpage`, {
state: {
needKind: thridData?.kind,
needImages: thridData?.images,
},
});
}}
sx={{ mt:3, margin: "auto", fontFamily: "Itim", color: "#737458", fontSize: 20 }}
>
How to Recycle this {thridData?.kind}??
</Button>
</Box>
</Grid>
);
Expand Down

0 comments on commit 9e260c7

Please sign in to comment.